Adding values from a dropdown option-CodePudding

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

CodePudding user response：

<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>

CodePudding user response：

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>