javascript中的变量失败(我想)当使用其中一个时，另一个会重叠

Question

我正在尝试做一个测试，我需要当你按下按钮时，它会给你尝试的次数(按下按钮的次数(和每次尝试的成功百分比(每次按下按钮时都会更新(，但在计算尝试次数时，只有第一次点击按钮的百分比才算数，其他时间不算数。如果我删除尝试，我会正确地获得百分比，但当尝试同时执行这两项操作时，它无法使百分比。。。有人能帮我吗？也许这是一个新手的错误，但我无法解决。我在这里留下了两个代码，包括JavaScript和HTML:

function corregir() {
var n1, n2, n3, n4;
if (document.getElementById("r11").checked == true &&
document.getElementById("r12").checked == false &&
document.getElementById("r13").checked == false &&
document.getElementById("r14").checked == true) {
n1 = 1;
} else {
n1 = 0;
}
if (document.getElementById("r22").checked == true) {
n2 = 1;
} else {
n2 = 0;
}

if (document.getElementById("34").selected == true) {
n3 = 1;
} else {
n3 = 0;
}
if (document.getElementById("4").value == "Structured Query Language") {
n4 = 1;
} else {
n4 = 0;
}
var suma = n1 + n2 + n3 + n4;
var nota = suma * 100 / 4;
//if I activate this by deactivating the onclick, the percentage works
//document.getElementById("porcentaje").innerHTML = "has acertado un "+ nota +"% de respuestas.";        

// Ponemos el contador a 0
var int = 0;
int = int + 1;
//IF I REMOVE THIS, THE PERCENTAGE IS GOING RIGHT:
document.getElementById("boton").onclick = function() {
document.getElementById("boton").value = "✿ Reintentar ✿";
document.getElementById("intentos").innerHTML = "Intento número " + ++int + ". En este intento has acertado un " + nota + "% de respuestas.";
}
}

<h1><u>Test sobre SQL</u></h1>
<form method="POST">
<b>1. De estas opciones, ¿cuáles puedes hacer en una base de datos SQL? <i class="pistas">Selecciona más de una respuesta</i></b> <i>(2,50 puntos)</i><br>
<input type="checkbox" id="r11" class="respst" required>Manipular datos<br>
<input type="checkbox" id="r12" class="respst">Jugar al Pac-Man<br>
<input type="checkbox" id="r13" class="respst">Hacer dibujos con letras y números<br>
<input type="checkbox" id="r14" class="respst">Hacer cálculos avanzados y álgebra<br><br>

<b>2. ¿Cuál es un tipo de base de datos SQL? <i class="pistas">Selecciona solo una respuesta</i></b> <i>(2,50 puntos)</i><br>
<input name="2" type="radio" id="r21" class="respst" required>MongoDB<br>
<input name="2" type="radio" id="r22" class="respst">Oracle<br>
<input name="2" type="radio" id="r23" class="respst">Redis<br>
<input name="2" type="radio" id="r24" class="respst">Apache Cassandra<br><br>
<b>3. Elije la base de datos que <u>no</u> sea SQL. <i class="pistas">Despliega y elige una respuesta</i></b> <i>(2,50 puntos)</i><br>
<select name="resPreg3">
<option id="30" value="0">--Elige una respuesta--</option>
<option id="31" value="0">Firebird</option>
<option id="32" value="0">Microsoft Access</option>
<option id="33" value="0">MariaDB</option>
<option id="34" value="1">CouchDB</option>
</select><br><br>
<b>4. ¿Qué significan las siglas SQL en inglés? <i class="pistas">Escribe tu respuesta en el cuadro</i></b> <i>(2,50 puntos)</i><br>
<textarea id="4" placeholder="Escribe aquí tu respuesta" cols="40" rows="2"></textarea><br><br>
</form>
<input class="boton" type="submit" value="✎ Corregir " onclick="corregir()" id="boton">
<span id="intentos"></span><span id="porcentaje"></span>

Answer 1

这里有一些问题

1. 您在HTML和代码中为按钮添加了一个事件处理程序。将其从HTML中删除，并用javascript附加单击事件
2. 为了跟踪尝试次数，执行此操作的变量需要在事件处理程序的范围之外

我认为这修复了你所期望的

var int = 0;
function corregir() {
var n1, n2, n3, n4;
if (document.getElementById("r11").checked == true &&
document.getElementById("r12").checked == false &&
document.getElementById("r13").checked == false &&
document.getElementById("r14").checked == true) {
n1 = 1;
} else {
n1 = 0;
}
if (document.getElementById("r22").checked == true) {
n2 = 1;
} else {
n2 = 0;
}

if (document.getElementById("34").selected == true) {
n3 = 1;
} else {
n3 = 0;
}
if (document.getElementById("4").value == "Structured Query Language") {
n4 = 1;
} else {
n4 = 0;
}
var suma = n1 + n2 + n3 + n4;
var nota = suma * 100 / 4;
// Ponemos el contador a 0

document.getElementById("boton").value = "✿ Reintentar ✿";
document.getElementById("intentos").innerHTML = "Intento número " + ++int + ". En este intento has acertado un " + nota + "% de respuestas.";
}
document.getElementById("boton").addEventListener("click", corregir);

<h1><u>Test sobre SQL</u></h1>
<form method="POST">
<b>1. De estas opciones, ¿cuáles puedes hacer en una base de datos SQL? <i class="pistas">Selecciona más de una respuesta</i></b> <i>(2,50 puntos)</i><br>
<input type="checkbox" id="r11" class="respst" required>Manipular datos<br>
<input type="checkbox" id="r12" class="respst">Jugar al Pac-Man<br>
<input type="checkbox" id="r13" class="respst">Hacer dibujos con letras y números<br>
<input type="checkbox" id="r14" class="respst">Hacer cálculos avanzados y álgebra<br><br>

<b>2. ¿Cuál es un tipo de base de datos SQL? <i class="pistas">Selecciona solo una respuesta</i></b> <i>(2,50 puntos)</i><br>
<input name="2" type="radio" id="r21" class="respst" required>MongoDB<br>
<input name="2" type="radio" id="r22" class="respst">Oracle<br>
<input name="2" type="radio" id="r23" class="respst">Redis<br>
<input name="2" type="radio" id="r24" class="respst">Apache Cassandra<br><br>
<b>3. Elije la base de datos que <u>no</u> sea SQL. <i class="pistas">Despliega y elige una respuesta</i></b> <i>(2,50 puntos)</i><br>
<select name="resPreg3">
<option id="30" value="0">--Elige una respuesta--</option>
<option id="31" value="0">Firebird</option>
<option id="32" value="0">Microsoft Access</option>
<option id="33" value="0">MariaDB</option>
<option id="34" value="1">CouchDB</option>
</select><br><br>
<b>4. ¿Qué significan las siglas SQL en inglés? <i class="pistas">Escribe tu respuesta en el cuadro</i></b> <i>(2,50 puntos)</i><br>
<textarea id="4" placeholder="Escribe aquí tu respuesta" cols="40" rows="2"></textarea><br><br>
</form>
<input class="boton" type="submit" value="✎ Corregir " id="boton">
<span id="intentos"></span><span id="porcentaje"></span>

旁注：它是有效的，但你不应该单独使用数字作为html元素的id，它们应该以a-z 开头