尝试学习addEventListener并且我的代码不起作用
[英]Trying to learn addEventListener and my code isn't working
问题描述
I am trying to create a magic 8 ball. 
我正在尝试创建一个魔术8球。 I've added the answers at the top in an array, added the code to choose a random answer, and when the button is clicked, it's supposed to place said random answer in ap tag in a div. 我已经在数组的顶部添加了答案，添加了选择随机答案的代码，并且当单击按钮时，应该将所述随机答案放置在div的ap标签中。 It actually worked very well a few times in codePen and then stopped. 实际上，它在codePen中工作了好几次，然后停止了。 I didn't change a thing. 我没有改变任何事情。 Can anyone tell me what I'm missing if anything? 谁能告诉我我想念的东西吗？
HTML 的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 的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);
I've tried moving things around and looking addEventListener up. 我尝试过移动并查找addEventListener。 There's a few questions here on that, too, but I haven't found anything that solves my issue. 这里也有一些问题，但是我还没有找到解决我问题的方法。
5 个解决方案
解决方案1
3 已采纳 2018-09-17 20:30:17
Try reordering the placement of your <script> tag in you HTML , so that the script is run after the DOM is loaded/parsed. 尝试重新排序HTML中<script>标记的位置，以便在加载/解析DOM之后运行脚本。 When your script is run, the button that you're trying to add a click listener to is not going to be present because the script is run from the <head> tag before the <body> DOM contents are loaded and ready. 运行脚本时，将不会显示您要添加单击侦听器的button ，因为脚本是在<body> DOM内容加载并准备就绪之前从<head>标记运行的。
Try the following adjustment: 尝试以下调整：
<!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>
Also, consider revising your javascript so the the randomAnswer is recomputed each time the user clicks the button, so that the answer shown to the answer is able to change per button click: 另外，考虑修改您的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);
解决方案2
2 2018-09-17 20:31:21
Your script is loaded in the header. 您的脚本已加载到标题中。 It's executed whereas the page didnt finished to load, so you're trying to attach a listener to the button element that doesnt exist yet. 它是在页面未完成加载的情况下执行的，因此您尝试将侦听器附加到尚不存在的button元素。 Move it to the bottom of the body section: 将其移动到正文部分的底部：
<!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">
// deleted
<title>8 Ball</title>
</head>
<body>
<div class="ball">
<div id="display">
<p id="output"></p>
</div>
</div>
<button id="button">Answer</button>
<script src="script.js"></script> // pasted here
</body>
</html>
解决方案3
1 2018-09-17 20:31:19
The problem is that your randomAnswer needs to be defined inside of the function, so that the answer gets decided upon each time you press the button. 问题是您的randomAnswer需要在函数内部定义，以便每次按下按钮时都randomAnswer答案。 Outside of the function it gets defined on page load, and the answer will be the same each time. 在函数之外，它是在页面加载时定义的，每次的答案都是相同的。
Here's an updated snippet: 这是更新的代码段：
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No", "Ask Me Later", "Not Yet" ]; function myFunction() { //random answer function displays random in the output id var randomAnswer = answers[Math.floor(Math.random() * answers.length)]; document.getElementById('output').innerHTML = randomAnswer; } document.getElementById('button').addEventListener('click', myFunction);
<!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>
解决方案4
1 2018-09-17 20:32:51
Move 移动
//random answer function displays random in the output id var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
inside of your function like this: 在您的函数内部，如下所示：
function myFunction(){ var randomAnswer = answers[Math.floor(Math.random()*answers.length)]; document.getElementById('output').innerHTML = randomAnswer; }
解决方案5
0 2018-09-17 20:53:54
document.getElementById('button').addEventListener('click', myFunction=()=>{
//[UPDATE] Move the random answer computation inside of myFunction()
var randomAnswer = answers[Math.floor(Math.random()*answers.length)];
document.getElementById('output').innerHTML = randomAnswer;
});
Place the logic inside the function and it will be created everytime that it is called. 将逻辑放在函数中，每次调用时都会创建逻辑。 Or ou could assign the function to a variable like this: 或者您可以将函数分配给这样的变量：
var answers = ["Yes!", "Absolutely!", "Not A Chance", "No",
"Ask Me Later", "Not Yet"];
let myFunction = function(){
//[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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.