Как я могу запустить функцию if / else Javascript через поле ввода и кнопку как событие в HTML? - PullRequest
Новая
       74

Как я могу запустить функцию if / else Javascript через поле ввода и кнопку как событие в HTML?

0 голосов
/ 20 июня 2020

У меня есть функция javascript, к которой я хочу подключиться и запустить через свой HTML. Это простая функция, которая показывает ответ (самая популярная видеоигра) в зависимости от введенного года. Теперь я считаю, что этот ввод передается через поле ввода в HTML, и ответ появляется после нажатия кнопки как событие. Моя проблема в том, что я не могу подключить эту функцию к моему HTML через поле ввода. другими словами, функция готова, но я все еще не могу ее запустить / применить. Я пробовал и экспериментировал с DOM, но все больше теряюсь.

Другими словами, у меня есть Javascript и HTML для того, что я хочу показать, но есть пропущенный шаг, HTML код, который ссылается на код javascript и фактически запускает его.

здесь начало и конец функции для удобства, поскольку она начинается с 1950 по 2020 год; 


mostPopularGame = year => {

const submitBtn = document.getElementById("yearInput");

if (year <= 0 || year > 2020 ) {
return 'Please enter a valid year!'
} else if ( year >= 1950 && year <= 1970) {
return 'Starting 1950 till 1969, early computer games on which everything we play now is based were developed as a hobby on university mainframe computers.'
} else if ( year === 1971 ) {
  return 'The most popular video game that year was Computer Space'
else {
return 'please enter a year starting 1950'
}
};

Теперь это мой HTML, я знаю, что код отсутствует и это может выглядеть немного запутанным (извините за это), так как я немного потерялся, когда дело доходит до DOM, обработчиков событий и прослушивателей событий . Я пытался это сделать в течение 4 дней, но я удалил код, который, как я подозревал, не поможет. Как видите, мой код находится внутри формы, которая включает в себя поле ввода текста в течение многих лет и другой ввод в качестве кнопки для события. 

<form>
          <h2> Please enter year here </h2>
         
      <input id="yearInput" type="text"/>
            <p> </p>
            
            <input type="button" id="result"
                   value="check"
                   onclick="mostPopularGame()">
                   </form>

Извините за длинный вопрос, но мне очень нужно ответ на это. Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

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

mostPopularGame = (year) => {
  /* Get user's input */
  var year = document.getElementById("yearInput").value;

  /* Default result */
  var result = "please enter a year starting 1950";

  /* Compare integer */
  if (year <= 0 || year > 2020) {
    result = "Please enter a valid year!";
  } else if (year >= 1950 && year <= 1970) {
    result = "Starting 1950 till 1969, early computer games on which everything we play now is based were developed as a hobby on university mainframe computers.";
  } else if (year === 1971) {
    result = "The most popular video game that year was Computer Space";
  }
  
  /* Render result to p element */
  document.getElementById('result').innerText = result;
};
<form>
  <h2> Please enter year here </h2>

  <input id="yearInput" type="number" />
  <p id="result"></p>

  <input type="button" id="result" value="check" onclick="mostPopularGame()">
</form>
0 голосов
/ 20 июня 2020

если я вас хорошо понял, тогда вам нужно было сделать что-то вроде этого 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <form>
    <h2> Please enter year here </h2>

    <input id="yearInput" type="text" />
    <p> </p>

    <input type="button" id="result" value="check" onclick="notify()">
  </form>
  <script>
    mostPopularGame = () => {

      const submitBtn = document.getElementById("yearInput");
      let year = submitBtn.value
      if (year <= 0 || year > 2020) {
        return 'Please enter a valid year!'
      } else if (year >= 1950 && year <= 1970) {
        return 'Starting 1950 till 1969, early computer games on which everything we play now is based were developed as a hobby on university mainframe computers.'
      } else if (year === 1971) {
        return 'The most popular video game that year was Computer Space'
      } else {
        return 'please enter a year starting 1950'
      }
    };

    notify = () => {
      alert(mostPopularGame())
    }
  </script>
</body>

</html>
0 голосов
/ 20 июня 2020

Я полагаю, вы хотите получить значение из поля ввода. Вы почти получили его.

Вы используете getElementById, чтобы получить элемент. Часть объекта элемента - .value. 

function mostPopularGame() {

    let year = document.getElementById("yearInput").value; // Gets #yearInput's value

    if (year <= 0 || year > 2020 ) {
       results =  'Please enter a valid year!'
    } else if ( year >= 1950 && year <= 1970) {
       results =  'Starting 1950 till 1969, early computer games on which everything we play now 
               is based were developed as a hobby on university mainframe computers.'
    } else if ( year === 1971 ) {
       results =  'The most popular video game that year was Computer Space'
    } else {
       results = 'please enter a year starting 1950'
    }

    document.getElementById("#results").innerText = results;
};

HTML: 

    <form>
        <h2> Please enter year here </h2>
         
        <input id="yearInput" type="text"/>
        <p id="results"></p>
            
        <input type="button" id="result" value="check" onclick="mostPopularGame()">
     </form>
...