javascript - 控制台上没有错误，使小圆圈在刷新时改变颜色

Question

我一直在尝试完成一个小练习，我让它在 codepen 中运行，但是当我将它通过 sublime 并在我的浏览器中打开它时，它什么也没显示！我试过通过 JSHint 运行它，一遍又一遍地阅读它。如果有人可以请花点时间快速通读一遍，我会很高兴。..这是它应该做的.. http://codepen.io/hellojessicagraham/pen/Ropgob

var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;


function colourSelect() {
    return Math.floor(Math.random() * 256 );
}

for(var i = 1; i<=100; i+=1) {
    red = colourSelect();
    green = colourSelect();
    blue = colourSelect();
    rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
    htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);

HTML如下

<!doctype html>
<html>
<head>

    <link rel="stylesheet" href="main.css"> 
</head>
<body>

    <script src="script.js"></script>

</body>
</html>

CSS如下

div{
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;

}

先感谢您

score 1 · Accepted Answer

由于它似乎适用于您的 html 文档中的所有代码，您确定指向您的 js/css 文件的链接是正确的吗？如果您不确定，请使用导航器中的检查器 (F12)。

编辑：它工作正常。就像 Dejan 所说，您的错误可能在您的样式表中。

var htmlDot = "";
var red;
var green;
var blue;
var rgbColor;


function colourSelect() {
	return Math.floor(Math.random() * 256 );
}

for(var i = 1; i<=100; i+=1) {
	red = colourSelect();
	green = colourSelect();
	blue = colourSelect();
	rgbColor = "rgb(" + red + "," + green + "," + blue + ")";
	htmlDot += "<div style=\"background-color:"+ rgbColor + " \"></div>";
}
document.write(htmlDot);

button {
  width:50px;
  height: 50px;
  border-radius: 50%;
  margin: 0px;
  display: inline-block;
}

div{
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

score 0 · Accepted Answer

您的 javascript 代码很好，您只忘记了 div 元素的 css。您的 div 都折叠成一个而不显示。给他们一些爱：D 喜欢在你发布的链接中，他们使用以下 css 创建了圈子。

.div {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
}

score 0 · Accepted Answer

没有

<body>

另外，尝试删除

  <!doctype html>

实际上，它工作正常。尝试确定路径和文件名。

javascript - 控制台上没有错误，使小圆圈在刷新时改变颜色

3 回答 3

Related

Reference