我怎样才能运行一个 if/else Javascript 函数并输入字段和一个按钮作为 HTML 中的事件？

Question

我有一个 javascript 函数，我想通过我的 HTML 连接到运行。这是一个简单的功能，可以根据输入的年份显示答案（最受欢迎的视频游戏）。现在我的想法是，此输入通过 HTML 中的输入字段传递，并且在单击按钮作为事件后出现答案。我的问题是我无法通过输入字段将此函数连接到我的 HTML。换句话说，功能已经准备好了，但我还不能run/apply。我一直在尝试和试验 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>

抱歉问了这么长的问题，但我非常渴望得到这个问题的答案。提前致谢。

Answer 1

我相信您希望从输入字段中获取值。你快搞定了。

您使用 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>

Answer 2

我注意到你有一个空的 p 标签，所以我假设你想 return 把结果放到这里。

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>

Answer 3

如果我很理解你，那么你必须做这样的事情

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

我怎样才能运行一个 if/else Javascript 函数并输入字段和一个按钮作为 HTML 中的事件？

How can I run an if/else Javascript function through and input field and a button as the event in HTML?

javascript

dom

function

event-handling

getelementbyid

我怎样才能 运行 一个 if/else Javascript 函数并输入字段和一个按钮作为 HTML 中的事件？

How can I run an if/else Javascript function through and input field and a button as the event in HTML?

javascript

dom

function

event-handling

getelementbyid

我怎样才能运行一个 if/else Javascript 函数并输入字段和一个按钮作为 HTML 中的事件？