Estoy configurando un interrogador para algunos de mis alumnos y estoy atascado.
Tengo varias preguntas que necesito hacerles a mis estudiantes. 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 100 para cada pregunta. Estoy tratando de agregar esos valores seleccionados para sumarlos a un total para poder mostrar un puntaje/resultado.
Adjunté el HTML y el JS para sumar los valores de cada uno de los menús desplegables (Todo bien hasta aquí).
function submit() { let total=0; document.querySelectorAll('select').forEach(element => { total += parseInt(element.value); }); console.log(total); } console.log = function(message) { document.getElementById('result').innerHTML = message;}; console.log(''); <p> 1. Did you attend summer training? <select id="select1"> <option value="0">NO</option> <option value="9">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select id="select2"> <option value="0">NO</option> <option value="22">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select id="select3"> <option value="0">NO</option> <option value="37">YES</option> </select> </p> <button onclick="submit()">Submit</button> <div id="result"></div>Mi obstáculo final depende del resultado final 'es decir, cuando presiono enviar' quiero mostrar un div específico con algún texto justo debajo del resultado/puntuación para cada rango de puntuación (es decir, cualquier resultado entre 0-20,20- 40,40-60,60-100). Entonces, por ejemplo, si el resultado cae entre 20-30. Quiero mostrar un div específico debajo del resultado que tendrá un texto explicativo y el resto de los divs para cada rango de puntuación estarán ocultos.
No estoy muy versado en JS y agradecería alguna ayuda u orientación. He agregado mi código como referencia.
Aquí estás :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <p> 1. Did you attend summer training? <select id="select1"> <option value="0">NO</option> <option value="9">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select id="select2"> <option value="0">NO</option> <option value="22">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select id="select3"> <option value="0">NO</option> <option value="37">YES</option> </select> </p> <button onclick="submit()">Submit</button> <div id="result"></div> <div id="comment"></div> </body> </html> <script> function submit() { let total = 0; document.querySelectorAll("select").forEach((element) => { total += parseInt(element.value); }); console.log(total); document.getElementById("result").innerHTML = total; if (0 < total && total < 20) { document.getElementById("comment").innerHTML = "so bad"; } else if (20 < total && total < 40) { document.getElementById("comment").innerHTML = "bad"; } else if (40 < total && total < 60) { document.getElementById("comment").innerHTML = "ok"; } else if (60 < total && total < 100) { document.getElementById("comment").innerHTML = "Great!"; } else null; } </script>Si desea predefinir el texto en html, puede hacerlo así:
HTML
<div id="0-20" class="hidden">some text</div> <div id="20-40" class="hidden">some text</div> <div id="40-60" class="hidden">some text</div> <div id="60-100" class="hidden">some text</div>CSS:
.hidden { display: none; }luego simplemente elimina la clase "oculta" del objetivo deseado, con JS:
document.getElementById("40-60").classList.remove("hidden")Puede usar el caso del interruptor para esto. Primero agregue DIV justo debajo de result div en html como se muestra a continuación.
<div style="display:none" id="mess1"> Message 1 </div> <div style="display:none" id="mess2"> Message 2 </div> <div style="display:none" id="mess3"> Message 3 </div> <div style="display:none" id="mess4"> Message 4 </div>Luego agregue el caso del interruptor en javascript como se muestra a continuación.
switch(true){ case total <= 20 : document.getElementById('mess1').style.display = 'block'; break; case total >= 20 && total <= 40 : document.getElementById('mess2').style.display = 'block'; break; case total >= 40 && total <= 60 : document.getElementById('mess3').style.display = 'block'; break; case total >= 60 && total =< 100 : document.getElementById('mess4').style.display = 'block'; break; }Entonces, el código completo se ve a continuación.
<p> 1. Did you attend summer training? <select id="select1"> <option value="0">NO</option> <option value="9">YES</option> </select> </p> <p> 2. Have you passed all your grades? <select id="select2"> <option value="0">NO</option> <option value="22">YES</option> </select> </p> <p> 3. Have you completed summer assignments? <select id="select3"> <option value="0">NO</option> <option value="37">YES</option> </select> </p> <button onclick="submit()">Submit</button> <div id="result"></div> <div style="display:none" id="mess1"> Message 1 </div> <div style="display:none" id="mess2"> Message 2 </div> <div style="display:none" id="mess3"> Message 3 </div> <div style="display:none" id="mess4"> Message 4 </div> <script> function submit() { let total=0; document.querySelectorAll('select').forEach(element => { total += parseInt(element.value); }); console.log(total); switch(true){ case total <= 20 : document.getElementById('mess1').style.display = 'block'; break; case total >= 20 && total <= 40 : document.getElementById('mess2').style.display = 'block'; break; case total >= 40 && total <= 60 : document.getElementById('mess3').style.display = 'block'; break; case total >= 60 && total <= 100 : document.getElementById('mess4').style.display = 'block'; break; } } console.log = function(message) { document.getElementById('result').innerHTML = message;}; console.log(''); </script>