Question

我正在尝试制作一个魔术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。这里也有一些问题，但是我还没有找到解决我问题的方法。

Answer 1

尝试重新排序HTML中<script>标记的位置，以便在加载/解析DOM之后运行脚本。运行脚本时，将不会显示您要向其添加点击侦听器的button，因为脚本是从<head> DOM之前的<body>标记运行的内容已加载并准备就绪。

尝试以下调整：

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

Answer 2

您的脚本已加载到标题中。它是在页面未完成加载的情况下执行的，因此您尝试将侦听器附加到尚不存在的button元素。将其移到正文部分的底部：

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

Answer 3

问题是您的randomAnswer需要在函数的内部中定义，以便每次按下按钮时都可以确定答案。在函数之外，它是在页面加载时定义的，每次的答案都是相同的。

这是更新的代码段：

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>

Answer 4

移动

//random answer function displays random in the output id var randomAnswer = answers[Math.floor(Math.random()*answers.length)];

在您的函数内部是这样的：

function myFunction(){ var randomAnswer = answers[Math.floor(Math.random()*answers.length)]; document.getElementById('output').innerHTML = randomAnswer; }

Answer 5

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;
});

将逻辑放在函数内，每次调用该逻辑时都会创建该逻辑。或者，您也可以将函数分配给这样的变量：

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);

尝试学习addEventListener并且我的代码不起作用

5 个答案: