JavaScript事件监听无法输出值，控制台显示undefined问题求助

核心错误点： #

• 数组定义错误：你把所有预测文本塞进了一个字符串里，导致predictions数组仅包含1个元素，无法随机选取单条预测内容。
• 函数调用错误：predictions[randomNumber]没有执行函数，应该写成randomNumber()，否则是把函数本身当作数组索引，必然返回undefined。
• Math大小写错误：JavaScript中的数学工具对象是大写的Math，小写math是未定义变量，会让randomNumber函数返回NaN，用NaN作为数组索引同样会得到undefined。
• 按钮绑定对象错误：你获取的是id为btn的div容器，而非里面的<button>元素，只有点击div区域才会触发事件，应该直接绑定按钮元素。

修复后的完整代码： #

JavaScript代码：

// 每个预测单独作为数组元素
const predictions = [
    'Ask again later',
    'Better not tell you now',
    'Cannot predict now',
    'Concentrate and ask again'
];
// 获取button元素而非外层div
const btn = document.querySelector('#btn button');

btn.addEventListener('click', function() {
    // 调用函数获取随机索引
    console.log(predictions[randomNumber()]);
});

function randomNumber() {
    // 修正Math大小写
    return Math.floor(Math.random() * predictions.length);
};

CSS代码（无修改）：

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

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

HTML代码（无修改）：

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

额外优化建议： #

如果想把预测内容显示在页面的#prediction区域而非仅控制台输出，可以修改点击事件代码：

btn.addEventListener('click', function() {
    const randomIndex = randomNumber();
    const predictionText = predictions[randomIndex];
    console.log(predictionText);
    // 更新页面文本
    document.querySelector('#prediction p').textContent = predictionText;
});

内容的提问来源于stack exchange，提问作者Corse