代码之家 › 专栏 › 技术社区 › Corse

无法让eventListener在控制台中显示值

console arrays html javascript

Corse · 技术社区 · 1 年前

嘿,伙计们,我是javascript新手,试图更好地理解它,我正在尝试制作一个8球项目,目前只是想看看它是否有效,让它显示在控制台上,但我收到的只是它是未定义的

const predictions = ['Ask again later, Better not tell you now, Cannot predict now, Concentrate and ask again'];
const btn = document.getElementById('btn')

btn.addEventListener('click', function() {
    console.log(predictions[randomNumber])
});




function randomNumber() {
    return Math.floor(math.random() * predictions.length)
};

body {
    background: linear-gradient(to right, #06932d, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
}

#prediction {
    position: fixed;
    top: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='8-ball.css'rel="stylesheet">
    <script defer src="8-ball.js"></script>
    <title>8 Ball</title>
</head>
<body>
    <div id="title">
        <h1>Try the Magic 8 Ball!</h1>
    </div>

    <div id="btn">
        <button>Try Me!</button>
    </div>

    <div id="prediction">
        <p>text</p>
    </div>
</body>
</html>

1 回复 | 直到 1 年前

Danziger 1 年前

您的代码中存在许多问题:

randomNumber 在这里:

console.log(predictions[randomNumber()]);

Math 始终以大写字母开头:

return Math.floor(math.random() * predictions.length);

看起来你想要 predictions 是具有多个字符串元素的数组。相反,您有一个带有逗号的元素:

const predictions = ['Ask again later, Better not tell you now, Cannot predict now, Concentrate and ask again'];

一切都已修复:

function randomNumber() {
  return Math.floor(Math.random() * predictions.length);
}

const predictions = [
  'Ask again later.',
  'Better not tell you now.',
  'Cannot predict now.',
  'Concentrate and ask again.'
];

const btn = document.getElementById('btn');
const prediction = document.getElementById('prediction');


btn.addEventListener('click', () => {
  prediction.textContent = predictions[randomNumber()];
});

body {
  background: linear-gradient(to right, #06932d, #000000);
  font-family: monospace;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

#title {
  font-size: 24px;
  margin: 0;
}

#box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#btn {
  border: 3px solid white;
  font-family: monospace;
  background: transparent;
  padding: 8px 16px;
  border-radius: 4px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  margin: 32px 0;
}

#prediction {
  font-size: 24px;
  margin: 0;
}

<div id="box">
  <h1 id="title">Try the Magic 8 Ball!</h1>
  <button id="btn">Try Me!</button>
  <p id="prediction">&nbsp;</p>
</div>