Soy un principiante en JavaScript. Espero que alguien pueda ayudarme
Básicamente, tengo varias preguntas que debo hacerles a mis alumnos. Todas las preguntas son preguntas de sí/no que se seleccionan de un menú desplegable. "No" siempre será 0, pero "Sí" tendrá una cifra entre 0 y 10.
Algo como esto
<p> 1. Did you attend summer training? <select id="select1"> <option value="0">NO</option> <option value="2">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select id="select2"> <option value="0">NO</option> <option value="4">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select id="select2"> <option value="0">NO</option> <option value="3">YES</option> </select> </p>Estoy tratando de agregar esos valores seleccionados para sumarlos a un total para poder mostrar una puntuación.
Agradezco cualquier ayuda
<p> 1. Did you attend summer training? <select id="select1"> <option value="0">NO</option> <option value="2">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select id="select2"> <option value="0">NO</option> <option value="4">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select id="select2"> <option value="0">NO</option> <option value="3">YES</option> </select> </p> <button onclick="submit()">Submit</button> <script> function submit() { let total; document.querySelectorAll('select').forEach(element => { total += element.value; }); console.log(total); } </script>Una forma de abordarlo es dar a todos sus menús de selección el mismo nombre de clase para que pueda hacer referencia a todos en un bucle y luego agregarlos todos juntos. Algo como esto:
window.addEventListener('DOMContentLoaded', () => { // wait until the document has loaded let total = 0 //initialize the variable document.querySelector('#tally').addEventListener('click', e => { // event listener to catch the button click e.preventDefault(); // prevent the form from submitting total = 0; // set the total to zero document.querySelectorAll('select.score').forEach(sel => total += +sel.value || 0); // loop through each select, get the value (which is a string) and convert to a number (with the + in front of it) console.log("total:", total) }) }) <form> <p> 1. Did you attend summer training? <select class='score' id="select1"> <option value="0">NO</option> <option value="2">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select class='score' id="select2"> <option value="0">NO</option> <option value="4">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select class='score' id="select2"> <option value="0">NO</option> <option value="3">YES</option> </select> </p> <button id='tally'>Tally</button> </form>