jquery sum не работает, при вызове функции сумма меняется на ноль

Question

Я создаю небольшое приложение для экзамена, когда я нажимаю следующую кнопку, текущее значение переключателя ответа должно быть сохранено в некоторой переменной, и это значение должно быть добавлено к следующему значению ответа, я делаю это с помощью jquery, но мое сохраненное значение всегда сбрасывается в ноль, когда я вызываю эту функцию несколько раз,

вот что я пробовал до сих пор. ниже моя страница просмотра

<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>

ниже приведен скрипт, к которому я пытаюсь добавить сумму ответов

<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();
        }
    });
}

Может кто-нибудь помочь в том, как рассчитать сумму.

Answer 1

Проблема в том, что вы сохраняете настройку var optionssum=0;

Я могу предложить вам сделать что-то вроде ниже

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: https://jsfiddle.net/synz/Ltv3k0bq/

Answer 2

Вы не можете сделать optionssum += optionssum + selopt; Я думаю, что вы имеете в виду optionssum += selopt;

Также, конечно, optionssum будет сбрасываться каждый раз, у вас есть это прямо здесь var optionssum=0; внутри StartTest() и каждый раз, когда нажимается кнопка, которая вызывается.

Просто измените свой код на это, он должен работать (Сделал это глобальной переменной)

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();
        }
    });
}