JS函数完成后重置

Question

我有一个小表格，旨在根据给出的答案计算分数。一切正常，变量显示在 variables 中，也显示在 html 中。然而，一瞬间后，函数重置并且生成的 var 也被删除。在试图理解时，我认为它与 var 或 form 行为的范围有关？这是一个片段：

</head>
<body>
<form id="calculateChangeForm" name="calculateChangeForm">
<p><strong>1. To what extend does the change impact the organization?</strong></p>
<input id="q1a1" name="q1" type="radio" value="2"> <label for="q1a1">A specific department or a working group</label><br><input id="q1a2" name="q1" type="radio" value="6"> <label for="q1a2">One department </label><br><input id="q1a3" name="q1" type="radio" value="7"> <label for="q1a3">Several departments</label><br><input id="q1a4" name="q1" type="radio" value="8"> <label for="q1a4">Whole organization</label><br><input id="q1a5" name="q1" type="radio" value="8"> <label for="q1a5">Cross entities</label><br><input id="q1a6" name="q1" type="radio" value="9"> <label for="q1a6">Regional Impact</label><br><input id="q1a7" name="q1" type="radio" value="10"> <label for="q1a7">Group Impact</label><hr class="mb-5 mt-5">
<p><strong>2. How many employees are impacted? </strong></p>
<input id="q2a1" name="q2" type="radio" value="1"> <label for="q2a1"> &lt; 10 </label><br><input id="q2a2" name="q2" type="radio" value="4"> <label for="q2a2">10 - 50 </label><br><input id="q2a3" name="q2" type="radio" value="7"> <label for="q2a3">51 - 100</label><br><input id="q2a4" name="q2" type="radio" value="8"> <label for="q2a4">101 - 200</label><br><input id="q2a5" name="q2" type="radio" value="9"> <label for="q2a5">201 - 500</label><br><input id="q2a6" name="q2" type="radio" value="10"> <label for="q2a6"> &gt; 500 </label><br><br><button id="calculateChangeButton" class="button">Submit</button>
<script> document.getElementById("calculateChangeButton").onclick = function() {calculateChange();}; </script>
</form><hr class="mb-5 mt-5"></div>
<p>Your score is: <span id="changeScore"></span></p>
<script>
var changescore = 0;

function calculateChange(){
            var val1 = 0;
            for( i = 0; i < document.calculateChangeForm.q1.length; i++ ){
                if( document.calculateChangeForm.q1[i].checked == true ){
                    val1 = document.calculateChangeForm.q1[i].value;
                    alert("The value of Question 1 answer is:  " + val1);
                }
            }
            var val2 = 0;
            for( i = 0; i < document.calculateChangeForm.q2.length; i++ ){
                if( document.calculateChangeForm.q2[i].checked == true ){
                    val2 = document.calculateChangeForm.q2[i].value;
                    alert("The value of Question 2 answer is:  " + val2);
                }
            }
            var changescore = parseInt(val1) + parseInt(val2);
            alert("The total score:  " + changescore);
            document.getElementById("changeScore").innerHTML = changescore;
}
</script>    
</body>

谢谢，

Answer 1

在用户 t348575 输入后，很明显按钮应该更改为 input type="button" 以停止提交表单：

JS函数完成后重置

JS function resets after completion

javascript

forms

function

reset