Добавление значений из выпадающего списка

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в JavaScript. Я надеюсь, что кто-нибудь сможет мне помочь

Итак, в основном у меня есть несколько вопросов, которые мне нужно задать своим студентам. Все вопросы, отвечающие на да / нет, выбираются из выпадающего списка. «Нет» всегда будет оставаться 0, но «Да» будет иметь значение где-то между 0-10.

Что-то вроде этого

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

Я пытаюсь добавить эти выбранные значения, чтобы суммировать их в общую сумму, чтобы я мог отобразить оценку.

Ценю любую помощь

1. Есть ли у вас какой-либо код javascript на данный момент?

2. Вы можете объявить глобальную переменную в свой js-файл, чтобы сохранить там сумму, а затем использовать событие onChange для добавления или вычитания из общей суммы на основе изменения: w3schools.com/jsref/event_onchange.asp

Ответ №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>

1. функция submit() { пусть total=0; документ. querySelectorAll(‘выбрать’). forEach(элемент => { total = parseInt(элемент.значение); }); console.log(всего); }

2. Кроме того, инициализируйте свою переменную let total=0

Ответ №2:

Один из способов решения этой проблемы — присвоить всем вашим меню выбора одно и то же имя класса, чтобы вы могли ссылаться на них все в цикле, а затем добавлять все это вместе. Что-то вроде этого:

 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>

Развернуть фрагмент