JS function resets after completion

I have a small form designed to calculate a score based on the answers given. Everything works, the variables are shown in the variables and also shown in the html for a split second. However, after a split second, the function resets and the resulting var is also removed. In trying to understand, I think it has to do with the scope of the var or form behavior?

Here is a snippet:

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

Solution

After input from user t348575, it was clear that the button should be changed to a an input type="button" in order to stop the form from being submitted: