Question

我一直在尝试完成一个小练习，并且我已经在codepen中运行了但是当我通过升级并在浏览器中打开它时它并没有显示任何内容！我试过通过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;

}

提前谢谢

Answer 1

由于它似乎与你的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;
}

Answer 2

你的javascript代码很好，你忘记的是div元素的CSS。你的div都被拼成一个而不显示。给他们一些爱：D LIke在你发布的链接中他们用下面的CSS创建了圈子。

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

Answer 3

没有

<body>

另外，请尝试删除

  <!doctype html>

实际上，它运行正常。请尝试确保路径和文件名。

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

3 个答案: