Tengo que agregar valores para todas las casillas de verificación que están seleccionadas. Me gustaría usar un bucle for para lograr esto.
Pero el código no funciona y creo que es por la forma en que estoy haciendo la concatenación.
He intentado lo siguiente pero ninguno funciona: window.document.forms[2].i.checked == true window.document.forms[2].${i}.checked == true
Este es mi código:
HTML:
<form class="jumbotron form3"> <h5>EXERCICE 7</h5> <p>Veuillez cocher trois cases:</p> <hr> <input type="checkbox" name="1" value="-8"> Case 1 <br><input type="checkbox" name="2" value="5"> Case 2 <br><input type="checkbox" name="3" value="3"> Case 3 <br><input type="checkbox" name="4" value="10"> Case 4 <br><input type="checkbox" name="5" value="0"> Case 5 <br><input type="checkbox" name="6" value="-1"> Case 6 <br><input type="checkbox" name="7" value="-7"> Case 7 <br><input type="checkbox" name="8" value="15"> Case 8 <br><input type="checkbox" name="9" value="8"> Case 9 <br><input type="checkbox" name="10" value="3"> Case 10 <hr> <input type="button" class="btn btn-warning" value="Calculer le score du jeu" onClick="calculerScore()"> <input type="button" class="btn btn-info" value="Reset"> <br><br> <input type="text" name="score"> </form>JS:
calculerScore = () => { var resultat = 0; for (let i = 1; i <= 10; i++) { if (window.document.forms[2].i.checked == true) { resultat += Number(window.document.forms[2].i.value); } } window.document.forms[2].score.value = resultat; }Puede acceder a sus elementos dom usando el método querySelector . Necesitamos querySelectorAll ya que queremos obtener todos los elementos coincidentes.
Pasos principales:
código JavaScript
const calculerScore = () => { // get ONLY checked boxes const allCheckedBoxes = window.document.querySelectorAll('input[type=checkbox]:checked'); // returns Nodelist object console.log('allCheckedBoxes: ', allCheckedBoxes); // take all checked boxes values in seperate array const checkedBoxesValues = [...allCheckedBoxes].map(box => { return parseInt(box.value); }) console.log("checkedBoxesValues:", checkedBoxesValues) // sum all values let resultat = 0; checkedBoxesValues.forEach(value => { resultat += value; }); console.log("resultat: ",resultat); // finally set value of score input tag window.document.querySelector('input[name="score"]').value = resultat; }He agregado consolas y comentarios para que se entienda.
Hay una forma más sencilla de hacerlo con reduce como mencionó @Invizi. Sin embargo, lo he omitido por ahora, percibiendo su comprensión de JS.
Avísame si te ayudó.
La manera fácil es usando Array.reduce().
const checkboxes = document.querySelectorAll("input[type=checkbox]"); const result = Array .from(checkboxes) .reduce((acc, checkbox) => acc + Number(checkbox.value), 0); console.log(result); <form class="jumbotron form3"> <h5>EXERCICE 7</h5> <p>Veuillez cocher trois cases:</p> <hr> <input type="checkbox" name="1" value="-8"> Case 1 <br><input type="checkbox" name="2" value="5"> Case 2 <br><input type="checkbox" name="3" value="3"> Case 3 <br><input type="checkbox" name="4" value="10"> Case 4 <br><input type="checkbox" name="5" value="0"> Case 5 <br><input type="checkbox" name="6" value="-1"> Case 6 <br><input type="checkbox" name="7" value="-7"> Case 7 <br><input type="checkbox" name="8" value="15"> Case 8 <br><input type="checkbox" name="9" value="8"> Case 9 <br><input type="checkbox" name="10" value="3"> Case 10 <hr> <input type="button" class="btn btn-warning" value="Calculer le score du jeu" onClick="calculerScore()"> <input type="button" class="btn btn-info" value="Reset"> <br><br> <input type="text" name="score"> </form>En primer lugar , debe optimizar ese código, no codificar todo, agregar una sola etiqueta en un bucle y renderizar eso. ( Solo una sugerencia )
En segundo lugar , por qué incluso acceder a todos los elementos de entrada accediendo al DOM, podría obtenerlos fácilmente a través del Formulario que agregó en la parte superior. Cuando adjunta un formulario a un grupo de etiquetas de entrada, almacena esas instancias en el formulario mismo, simplemente obtenga el formulario (puede adjuntar una identificación a eso) y acceda a todas las entradas a través de esa instancia.