Adding values from a dropdown option

Question

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

You can declare a global variable to your js file in order to keep the sum there and then use the onChange event to add or subtract from your total based on the change: w3schools.com/jsref/event_onchange.asp — Babis.amas
– Babis.amas, Commented Dec 9, 2021 at 17:11

Santosh Kumar Rao · Accepted Answer · 2021-12-09 17:20:30Z

1

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

answered Dec 9, 2021 at 17:20

Santosh Kumar Rao

491 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Snivio Over a year ago

function submit() { let total=0; document.querySelectorAll('select').forEach(element => { total += parseInt(element.value); }); console.log(total); }

Kinglish Over a year ago

Also, initialize your variable let total=0

Kinglish · Accepted Answer · 2021-12-09 17:15:59Z

0

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>

answered Dec 9, 2021 at 17:15

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

1 Comment

user36319 Over a year ago

Thanks everyone. I was able to create the program with your help

Collectives™ on Stack Overflow

Adding values from a dropdown option

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related