Question

所以我有一个调查问卷，其中有一些动画是一个进度条，一旦用户选择了一个单选按钮就会增加。我可以通过重置按钮来重置答案并将栏降低到零，但是如果用户然后选择他们之前未选择的单选按钮，则栏会自动跳回到之前的状态+ 1.

我正在尝试将问题对象重置为0，而在开发人员工具中出现“q1”等再次为0，值仍然会跳到+1

这是调用重置按钮的HTML代码

   <!-- First Container -->
<div class="container-fluid bg-2 text-center">
  <h3 class="margin">Questionnaires</h3>

    <div class="container-main bg-5">
<button style="float:left" onclick="goBack()">Go Back</button>

  <h1>What IT sector could suit you</h1>
  <p>Take the questionnaire below!</p>

  <form id="quiz">
    <!-- Question 1 -->
    <h2>Do you enjoy fixing things</h2>
    <!-- Here are the choices for the first question. Each input tag must have the same name. For this question, the name is q1. -->
    <!-- The value is which answer the choice corresponds to. -->

      <div class="questions">
    <label><input type="radio" name="q1" id="q1" value="c1">
      Yes
    </label><br />
    <label><input type="radio" name="q1" id="q1" value="c2">
      No
    </label><br />
    <label><input type="radio" name="q1" id="q1" value="c3">
      Maybe
    </label><br />
      </div>


    <div class="questions">
      <!--Question 5 -->
      <h2>Hardware or Software?</h2>
      <label><input type="radio" name="q5" value="c1">
          Hardware</label><br />
       <label><input type="radio" name="q5" value="c2">
         Software</label><br />
      </div>

    <button type='button' id="submit" onclick="tabulate()">Submit Your Answers</button>
  <button type="reset" id="reset" onclick="resetAnswer()">Reset</button>
  </form>

  <div id ="progressbar-1"></div>


</div>

这是重置栏的代码

           <script>

// program the reset button
  function resetAnswer() {

       var progress = document.getElementById('progress');
             var total_questions = 5;
    //need this to check if the question has not been answered before


    // progress bar Calculation
    var result =  progress / total_questions;
    result = result * 100;

       $("input:radio").removeAttr("checked");

    $("#progressbar-1").css({'width':result-result,'background-color':'white'});


         var questions = {
        "q1": 0,
        "q2":0,
        "q3":0,
        "q4":0,
        "q5":0
    }
      console.log(questions);
        console.log("q1");



    }


    </script>

以下是我使用的主要帮助增加标准的代码

 <script>
 var progress = 0;
 var total_questions = 5;
    //need this to check if the question has not been answered before
    var questions = {
        "q1": 0,
        "q2":0,
        "q3":0,
        "q4":0,
        "q5":0
    }
    $( function() {
        $("#progressbar-1").text(progress)
        $("input, select").change( function() {
            el_name = $(this).attr("name");


            switch (this.nodeName.toLowerCase()) {
                case "select":
                    field =$("[name='"+el_name+"']");
                    val = (field.val() === ""  || !field.val()) ? null: field.val();
                    break;
                case "input":
                    field =$("[name='"+el_name+"']:checked");
                    val = field.length;
                    break;
            }

            if (val) {

                if (!questions[el_name]) {
                    progress = progress +1;
                    questions[el_name]=1
                }

            } else {


                questions[el_name]=0
                progress = (progress > 0)?progress-1:0;


            }
                        var result =  progress / total_questions;
            result = result * 100;

            $("#progressbar-1").css({'width':result+'%','background-color':'red'});
            $("#progressbar-1").text(progress);
        })
    })
    </script>

Answer 1

我相信你的reset方法过于复杂。如果您只想重置questions对象，则不应在reset方法中重新声明它。删除var将解决您的问题。

var questions = {
    "q1": 0,
    "q2":0,
    "q3":0,
    "q4":0,
    "q5":0
}

Reset answer方法

function resetAnswer() {

  $("input:radio").prop("checked", false);

  $("#progressbar-1").css({
    'width': 0,
    'background-color': 'white'
  })
  .text("0");


  progress = 0;
  questions = {
    "q1": 0,
    "q2": 0,
    "q3": 0,
    "q4": 0,
    "q5": 0
  };

  console.log(questions);
}

在这里完成jsfiddle https://jsfiddle.net/t4e5vuxe/

重置进度条

1 个答案: