I am a beginner to JavaScript. I hope someone can help me
So basically i have several questions i need to ask my students. All the questions being yes/no questions being selected from a dropdown. "No" will always remain 0 but "Yes" will have a figure somewhere between 0-10.
Something like this
<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>
I am trying to add those selected values to sum them to a total so i can display a score.
Appreciate any help
<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>
One way to approach it is to give all your select menus the same class name so you can reference them all in a loop, then add it all together. Something like this:
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>