Как получить value в форме-тесте из input и поместить это в переменную result?

Question

Я начинающий кодер и пока только осваиваю основы в JS. Итак, я решила, что мне необходимо создать тест, в котором один из вопросов будет input. Ответ, который будет получен от пользователя необходимо поместить в переменную result. В свою очередь число, хранящееся в ней будет выведено командой alert. Вот я и столкнулась с проблемой вывода значения и его записи в переменную result. Помогите, пожалуйста, несложным кодом для новичка!

HTML:

<p> 
<label for="weather"><strong>What type of 
natural disaster is responsible for the highest 
death toll in the United States over the past 30 years?</strong></label><br>
<input type="text"><br>

Целый код:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script>
    function calculate(){
      var result = 0
      var eq3 = form.eq3.checked
      if (eq3 == true){
        result+=1
      }
      var ts1 = sel.value
      if (ts1 == true){
        result+=1
      }
      const options = document.getElementById("country1").options;
      for (let opt of options) {       
            if (opt.selected){
                if(opt.value == "ind"){
                    result += 1
                }
                if(opt.value == "ch"){
                    result += 1
                }
                if(opt.value == "uthes"){
                    result += 1
                }
                if(opt.value == "indon"){
                    result += 1
                }
                if(opt.value == "pak"){
                    result += 1
                }
                if(opt.value == "nig"){
                    result -= 1
                }
                if(opt.value == "mex"){
                    result -= 1
                }
                if(opt.value == "bang"){
                    result -= 1
                }
                if(opt.value == "can"){
                    result -= 1
                }
                if(opt.value == "ir"){
                    result -= 1
                }
            }
        }
    // выбираем элемент по его ID
    const myInput = document.getElementById('weather');
    //let result = 0; 
    // Создали переменную
    // Создаем обработчик события на изменение значения в input
    myInput.addEventListener('input', function(event) {
    // Что введено
    console.log('Введено:', event.target.value)
    // Тут ваше условие 
    if (event.target.value === 'heat' || event.target.value === 'Heat')   {
        result++;
    } else {
        result--;
    }
    console.log(result);
    //alert(result)
    })


      alert(result)
      }
    </script>
</head>
<body>
<div id="ex1"></div>
<FORM NAME="Test" id="form">
    <label for="earthquakes"><strong>What causes earthquake?</strong></label><br>
    <label><input type="radio" name="earthquakes" value="0" id="eq1"> Earthquakes are the result of <em> an irritable reaction of the earth's core to human activity.</em> </label> <br>
    <label> <input type="radio" name="earthquakes" value="0" id="eq2"> Earthquakes are the result of <em>too much movement of people.</em></label> <br>
    <label> <input type="radio" name="earthquakes" value="1" id="eq3"> Earthquakes are the result of <em> sudden movement along faults within the Earth. </em> </label> <br>
    <label> <input type="radio" name="earthquakes" value="0" id="eq4"> Earthquakes are the result of <em>too much movement of marine animals.</em></label> <br>

    <p>
    <label for="tsunami"><strong>Tsunami is...</strong></label><br>
    <select name="tsunami" id="sel">
        <option value="0"></option>
        <option name="tsunami" value="1" id="ts1">a giant wave caused by earthquakes or volcanic eruptions under the sea.</option>
        <option name="tsunami" value="0" id="ts2">fantastic plot, non-existent in real life.</option>
    </select>
      <p>
    <label for="country"><strong>What are the 5 most populated countries according to 2024 data?</strong><br>
    Select multiple options by <em>holding Ctrl (or ⌘) and clicking.</em></label><br>
    <select multiple name="country" id="country1">
        <option name="country" value="ind" id="india">India</option>
        <option name="country" value="nig" id="nigeria">Nigeria</option>
        <option name="country" value="ch" id="china">China</option>
        <option name="country" value="mex" id="mexico">Mexico</option>
        <option name="country" value="uthes" id="us">United States</option>
        <option name="country" value="bang" id="bangladesh">Bangladesh</option>
        <option name="country" value="indon" id="indonesia">Indonesia</option>
        <option name="country" value="can" id="canada">Canada</option>
        <option name="country" value="ir" id="iran">Iran</option>
        <option name="country" value="pak" id="pakistan">Pakistan</option>
</select>
    </p> 
    <p>
    <label for="weather"><strong>What type of natural disaster is responsible for the highest death toll in the United States over the past 30 years?</strong></label><br>
    <input id="weather" type="text"><br>
    <p>
    <input type="button"  value="Calculate the results" onclick="calculate()">
    <input type="reset" value="Reset">
    </p>
    <u>Total points:</u> <input type="text" name="result" readonly>
</FORM>
</body>
</html>

Answer 1

Вот так можно получать информацию о введенном значении в поле input

// выбираем элемент по его ID
const myInput = document.getElementById('weather');
let result = 0; // Создали переменную
// Создаем обработчик события на изменение значения в input
myInput.addEventListener('input', function(event) {
  // Что введено
  console.log('Введено:', event.target.value)
  // Тут ваше условие 
  if (event.target.value === 'heart' || event.target.value === 'Heart') {
    result++;
  } else {
    result--;
  }
  console.log(result);
  //alert(result)
})

<p>
  <label for="weather"><strong>What type of
        natural disaster is responsible for the highest
        death toll in the United States over the past 30 years?</strong></label><br>
  <input id="weather" type="text"><br>

Обратите внимание, что вашему input добавлен id="weather"

UPD

По комментариям, скорректированный код под работу в функции

const myInput = document.getElementById('weather').value;
if (myInput === 'heart' || myInput === 'Heart') {
    result++;
} else {
    result--;
}

БЛОГ НА HUSL

Как получить value в форме-тесте из input и поместить это в переменную result?

Ответы (1 шт):

UPD