Javascript中函数变量的范围：循环通过背景颜色答案

【问题标题】：Scope of Function variable in Javascript: Looping through background colorsJavascript中函数变量的范围：循环通过背景颜色
【发布时间】：2021-10-27 04:30:30
【问题描述】：

有人可以向我解释为什么这不起作用。我的目标是遍历一个 javscript 文件以更改单击时我的 html 文档的背景颜色。当我要这样做时，它不会循环通过，而是直接变成黄色（循环的最后一个）

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

function myFunction(){
    for (let i=0; i<colors.length; i++){
    document.body.style.backgroundColor = colors[i]
    }
}

它会自动转到 i = 2 并创建黄色背景色

这里是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">
    <title>Colour Flipper</title>
    <link rel="stylesheet" href="colourflipper.css">
</head>
<body>
    <div class="top">
        <ul>Colour Flipper</ul>
        <ul>Simple Hex</ul>
    </div>
    <div class="main">
        <button id="btn" onclick="myFunction()">
        <h1>Background Colour</h1>
    </button>
    </div>
    <script src="colourflipper.js"></script>
</body>
</html>

【问题讨论】：

还请包括您要实现的目标（“不起作用”不起作用）。然后大声读出你想要做的事情，并将其与你的函数代码进行比较。
代码有效。但它并没有按照您的预期进行。你想看到交替的颜色吗？请注意，循环运行得非常快，您根本看不到前两种颜色
同步代码运行时浏览器 UI 不更新。由于您使用的是循环，因此循环会运行到完成，然后 UI 会更新。您需要在为要看到的每个单独更改设置背景之间使用一些超时
我正在尝试更改点击颜色

标签： javascript html css

【解决方案1】：

您遇到的问题是每次点击都会运行整个myFunction 代码。因为您的计数器是在函数中定义的，所以每次单击都会重置它，并且每次都在运行循环，并在每次单击时循环遍历所有颜色。您只看到黄色是因为它运行得太快，您无法看到各个颜色，并且循环以黄色结束，因为它是颜色数组中的最后一个元素。

如果您想在点击时循环颜色，您需要将颜色的状态存储在函数循环之外，因为您的事件函数应该只需要在每次点击发生时都会运行的代码。

这是我想象的你希望它工作的方式：

const colors = ["blue", "green", "yellow"];
const btn = document.getElementById("btn");
let colorIndex = -1;

function myFunction(){
  colorIndex += 1;
  if (colorIndex > colors.length-1) colorIndex = 0;
  document.body.style.backgroundColor = colors[colorIndex]
}

<!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">
    <title>Colour Flipper</title>
    <link rel="stylesheet" href="colourflipper.css">
</head>
<body>
    <div class="top">
        <ul>Colour Flipper</ul>
        <ul>Simple Hex</ul>
    </div>
    <div class="main">
        <button id="btn" onclick="myFunction()">
        <h1>Background Colour</h1>
    </button>
    </div>
    <script src="colourflipper.js"></script>
</body>
</html>

【讨论】：

抱歉应该更具体，我正在尝试更改点击时的背景颜色
对不起，我回答得太早了。我已经为你编辑了我的答案。希望有帮助
非常感谢，这真的很有帮助，它有效，我会看看它
我很高兴，我还编辑了我的答案来解释为什么这段代码有效。如果我能更好地为您解释，请告诉我。

【解决方案2】：

SubXaero 答案的另一种方法是使用a closure 来维护一个局部变量，而不是创建一个全局变量。

注意：我在这里使用了类，而不是直接设置背景样式。

const colors = ["blue", "green", "yellow"];

const btn = document.getElementById("btn");
const color = document.getElementById("color");

// Pass in `colors` to the handler which returns a new
// function that does all the work
btn.addEventListener('click', handleClick(colors), false);

// This function accepts colors as an argument
// initialises the array index, and then
// returns the function that will be used as the listener
function handleClick(colors) {
  let index = 0;
  return function() {
    if (index < colors.length) {
      color.classList.add(colors[index]);
      ++index;
    }
  }
}

.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }

<div id="color">Colour</div>
<button id="btn">Background Colour</button>

【讨论】：