jquery sum is not working, when calling the function the sum changes to zero

Question

I am creating a small application for the examination, when I click the next button, the current answer radio button value should be stored in some variable and that value should be added to the next answer value, i am doing this with the jquery, but my stored value is always re-setting to zero when I call that function for the multiple times,

here is what I tried so far. following is my view page

<div>

    <div id="questionvalue">@a.QDescription</div>
    <div>
        <div id="questionvalue">
            <input type="radio" name="test" value="@a.Choice1Percent">  @a.Choice1Desc<br>
        </div>

    </div>
    <div>
        <input type="radio" name="test" value="@a.Choice2Percent">  @a.Choice2Desc<br>

    </div>
    <div>
        <input type="radio" name="test" value="@a.Choice3Percent">  @a.Choice3Desc<br>

    </div>
    <div>
        <input type="radio" name="test" value="@a.Choice4Percent">  @a.Choice4Desc<br>

    </div>

<button type="button" id="starttestbuttonid" class="btn btn-default" onclick="StartTest()">Next</button>

following is the script which i am trying to add the sum of the answers

<script>
function StartTest() {
    debugger;
    var selopt = parseFloat($('input[name=test]:checked').val());

    var optionssum=0;
    optionssum+= optionssum + selopt;

    $.ajax({
        url: $("baseUrl").html() + "Test/_QuestionView",
        type: "POST",
        data: { selectedoption: selopt},
        success: function (data) {
            debugger;

            $('#appendquestion').html(data);
          //  $('#myModal').modal(show);



        },
        error: function (data) {
            $('#loading').hide();
        }
    });
}

can anyone help in how to calculate the sum.

Answer 1

The problem is because you keep set var optionssum=0;

I can suggest to you doing something like below

HTML

    <div id="questionvalue">@a.QDescription</div>
    <div>
        <div id="questionvalue">
            <input type="radio" name="test" value="1">  1<br>
        </div>

    </div>
    <div>
        <input type="radio" name="test" value="2">  2<br>

    </div>
    <div>
        <input type="radio" name="test" value="3">  3<br>

    </div>
    <div>
        <input type="radio" name="test" value="4">  4<br>

    </div>

<button type="button" id="starttestbuttonid" class="btn btn-default" data-optionssum="0" >Next</button>
<br>
<b>Total : <span class="tot" >
</span>
</b>

JAVASCRIPT

$(document).ready(function(){


$("#starttestbuttonid").on("click",function(){
        var optionssum = $(this).data("optionssum");
    var selopt = parseFloat($('input[name=test]:checked').val());
        alert("+ "+selopt);

    if(!isNaN(selopt))
    optionssum+= selopt;

    /*
        Your ajax
    */

    //set latest total value
    $(this).data("optionssum",optionssum);

    // just want to show the value
    $(".tot").html(optionssum);
});

});

JSFiddle example : https://jsfiddle.net/synz/Ltv3k0bq/

Answer 2

You can't do optionssum += optionssum + selopt; I think you mean optionssum += selopt;

Also, of course optionssum is going to be reset every time, you have it right here var optionssum=0; inside of StartTest() and every time the button is clicked that is called.

Just change your code to this, it should work (Made it a global variable)

var optionssum=0;    
function StartTest() {
    debugger;
    var selopt = parseFloat($('input[name=test]:checked').val());


    optionssum+= selopt;

    $.ajax({
        url: $("baseUrl").html() + "Test/_QuestionView",
        type: "POST",
        data: { selectedoption: selopt},
        success: function (data) {
            debugger;

            $('#appendquestion').html(data);
          //  $('#myModal').modal(show);



        },
        error: function (data) {
            $('#loading').hide();
        }
    });
}