我有一个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>
抱歉，这个问题太长了，但我非常渴望得到这个问题的答案。 提前谢谢你。
我相信您希望从输入字段中获取值。 你差一点就拿到了。
使用getElementById获取元素。 元素对象的一部分是。value。
function mostPopularGame() {
let year = document.getElementById("yearInput").value; // Gets #yearInput's 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'
}
};
如果我很了解你，那么你一定会做这样的事
<!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>
我注意到您有一个空的p标记，所以我假设您想要将结果返回到这里。
null
mostPopularGame = (year) => {
/* Get user's input */
var year = document.getElementById("yearInput") || 0;
/* Then transform string into a integer */
year = parseInt(year.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="text" />
<p id="result"></p>
<input type="button" id="result" value="check" onclick="mostPopularGame()">
</form>