Question

我正在尝试更改单击时的背景颜色，但似乎不起作用。我正在观看一个名为 Vanilla Javascript 的视频。我正在将我的代码与视频中的代码进行比较，但我找不到差异。

 <!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">
    <script src="first.js"></script>
    <link rel="stylesheet" href="neww.css">
    <title>Change Background Color</title>
</head>
<body>
    <nav>
        <div class="nav-center">
            <h4>color flipper</h4>
            <ul class="nav-links">
                <li>
                    <a href="index.html"></a>
                </li>
                <li>
                    <a href="neww.html"></a>
                </li>
            </ul>
        </div>
    </nav>
    <main>
        <div class="container">
            <h2>Background color : <span class="color">
                #f1f5f8
            </span>
        </h2>
            <button class="btn btn-hero" id="btn">click me</button>
        </div>
    </main>
    <script src="first.js"></script>
</body>
</html>

Javascript：

const colors = ["green", "red", "blue", "yellow"];
const btn = document.getElementById('btn');
const color = document.querySelector('.color');

btn.addEventListener('click', function(){
    const randomNumber = 1;
    document.body.style.backgroundColor = colors[randomNumber];
    color.textContent = colors[randomNumber];
}
);

Answer 1

代码中的问题是您没有在 const randomNumber = 1; 中生成随机数，因此它始终为 1。

因为您是从具有 4 个元素的数组中获取颜色。您需要生成一个介于 0 和 3 之间的数字（数组的索引）。

因此更改该行： const randomNumber = Math.floor(Math.random() * (3 - 0) + 0)。这将只生成 0 到 3 之间的数字。

更改背景颜色 Javascript HTML 无链接

1 个答案: