为什么我的功能没有运行？ [关闭]答案

【问题标题】：Why is my function not running? [closed]为什么我的功能没有运行？ [关闭]
【发布时间】：2018-02-06 17:47:21
【问题描述】：

我正在制作一个包含一个圆圈和一个按钮的页面。按下按钮后，我希望圆圈变为随机颜色。

为什么我的代码运行不正确？

$("#button").click(function() {

  $("#thing").css("background-color", function() {

    var color = "#";

    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

    while (var i = 0; i < 6; i++) {

      color += hex[Math.floor(Math.random() * 16)];

    }

    alert(color);

    return color;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thing"></div>

<button id="button">Click to change colour</button>

【问题讨论】：

将 while 更改为 for。 while 循环需要一个条件。
检查您的控制台是否有语法错误。
语法错误，用for替换while
欢迎来到 SO。请查看tour。您可能还想查看What topics can I ask about 和How to Ask，以及如何创建minimal reproducible example。发布您尝试过的代码和您收到的错误。尽可能具体，因为它会带来更好的答案。

标签： javascript jquery css

【解决方案1】：

您需要在此处使用 for 循环。不是while循环。

for( var i = 0; i < 6; i++) {
     color += hex[Math.floor(Math.random() * 16)];
}

【讨论】：

【解决方案2】：

你甚至没有画一个圈，你为while循环引入了一个新语法，恭喜

¯_(ツ)_/¯

好吧，您可以使用以下代码来查看您在其中做错了什么，并且您不会从设置color 而不是从那里返回的点击事件返回任何内容

$("#button").click(function() {

  $("#thing").css("background-color", function() {

    var color = "#";

    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
    var i = 0;
    while (i < 6) {

      color += hex[Math.floor(Math.random() * 16)];
      i++
    }
    $(this).css('background-color', color);
    //return color;

  });

});

#thing {
  color: #000;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thing">
</div>

<button id="button">Click to change colour</button>

【讨论】：

【解决方案3】：

您的代码存在一些错误。希望这会有所帮助

$("#button").click(function() {
  $("#thing").css("background-color", function() {
    var color = "#";
    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

    for (i = 0; i < 6; i++) {
      color += hex[Math.floor(Math.random() * 16)];
    }

    alert(color);
    return color;
  })
})

#thing {
  width: 20px;
  height: 20px;
  background: #ededed;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thing"></div>

<button id="button">Click to change colour</button>

【讨论】：

投反对票有什么理由吗？
我没有 dv，但可能是因为你只是发布了一些代码，没有解释你做了什么。
@JohnnyMopp，可能是。谢谢。将在这部分工作
这个答案没有错，别担心老兄来了+1 (⌐■_■)

【解决方案4】：

while 无法按您的预期工作。您拥有的语法将用作for，但不是while。

for (let i = 0; i < 6; i++) {
  color += hex[Math.floor(Math.random() * 16)];
}

如果您想使用while，您可以执行以下操作：

let i = 0; 
while(i < 6) {
  color += hex[Math.floor(Math.random() * 16)];
  i++;
}

但是，不需要循环来创建 0 到 0x1000000 之间的数字。

/** Creates a color between 
 * #000000 and #ffffff inclusive
 */     
function createRandomColor() {
  const strHex = 
    Math.floor(Math.random() * 0x1000000)
    .toString(16)
    .padStart(6, '0');
  return `#${strHex}`;
}

const $thing = $('#thing');
$('#button').click(() => {
  $thing.css('background-color', createRandomColor());
});

#thing {
  width: 20px;
  height: 20px;
  background: #ededed;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thing"></div>

<button id="button">Click to change colour</button>

我通常写 ES6，但String.prototype.padStart 是 ES2017。如果你遵循文档，你可以获取一个 polyfill。

【讨论】：