时间戳

首页 > 解决方案 > 如何通过输入字段和按钮作为 HTML 中的事件运行 if/else Javascript 函数？

javascript - 如何通过输入字段和按钮作为 HTML 中的事件运行 if/else Javascript 函数？

问题描述

我有一个要连接并通过我的 HTML 运行的 javascript 函数。这是一个简单的功能，根据输入的年份显示答案（最流行的视频游戏）。现在我的想法是，这个输入是通过 HTML 中的输入字段传递的，并且在单击按钮作为事件之后会出现答案。我的问题是我无法通过输入字段将此函数连接到我的 HTML。换句话说，功能已准备就绪，但我仍然无法运行/应用它。我一直在尝试和试验 DOM，但我越来越迷失方向。

换句话说，我有想要显示的 Javascript 和 HTML，但是缺少一个步骤，即引用并实际运行 javascript 代码的 HTML 代码。

为方便起见，这里是函数的开始和结束，因为它从 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>

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

标签： javascriptfunctiondomevent-handlinggetelementbyid

解决方案

我相信您正在寻找从输入字段中获取值。你几乎拥有它。

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

推荐阅读