我正在尝试创建一个神奇的 8 球。我在数组的顶部添加了答案，添加了选择随机答案的代码，当单击按钮时，它应该将所述随机答案放在 div 中的 p 标记中。它实际上在 codePen 中运行得很好几次然后就停止了。我什么都没改变。谁能告诉我我缺少什么？
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
</body>
</html>
JavaScript
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
//random answer function displays random in the output id
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
function myFunction(){
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
我试过四处移动并查找 addEventListener。这里也有一些问题，但我还没有找到任何可以解决我的问题的方法。
最佳答案
尝试重新排列您的 <script> 的位置HTML 中的标记，以便在加载/解析 DOM 后运行脚本。
当您的脚本运行时，button您尝试添加点击监听器的那个不会出现，因为脚本是从 <head> 运行的<body> 之前的标签DOM 内容已加载并准备就绪。
尝试以下调整:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
<!-- Put script here instead -->
<script src="script.js"></script>
</body>
</html>
此外，请考虑修改您的 javascript，以便在每次用户单击按钮时重新计算 randomAnswer，以便每次单击按钮时显示的答案都可以更改:
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
function myFunction(){
//[UPDATE] Move the random answer computation inside of myFunction()
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
}
document.getElementById('button').addEventListener('click', myFunction);
关于javascript - 尝试学习 addEventListener 但我的代码不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52375240/