no error on console, making little circles change colour on refresh

Question

no error on console, making little circles change colour on refresh

65 views Asked by DumbDevGirl42069 At 08 January 2017 at 00:29

I have been trying to complete a small exercise and I have it running in codepen but when I put it through sublime and open it in my browser it doesn't show anything! I have tried running it through JSHint, read over and over it. Would love if someone one could please take a moment to have a quick read through. ..This is what it's supposed to do.. 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);

The HTML is as follows

<!doctype html>
<html>
<head>

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

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

</body>
</html>

CSS as follows

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

}

Thank you in advance

Original Q&A

There are 3 answers

**Quinox** · Answer 1 · 2017-01-08 00:38:37

Since it seems to work with all the code on your html document, are you sure the links to your js/css files are correct ? Use the inspector in your navigator (F12) if you're not sure.

Edit : It's just working fine. Like Dejan said, your error is probably in your stylesheet.

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;
}

**Dejan** · Answer 2 · 2017-01-08 00:42:14

Your javascript code is fine, all u forgot is the css of the div element. Your divs are all collapesed into oneand not displaying. Give them some love :D LIke in the link u posted they created circles with the folowing css.

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

**I_Al-thamary** · Answer 3 · 2017-01-08 00:48:08

I_Al-thamary On 08 January 2017 at 00:48

There is no

<body>

Also, try to remove

  <!doctype html>

Actually, it works fine.Try to make sure about the path and the file name.

TechQA.

no error on console, making little circles change colour on refresh

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in CODEPEN

Popular Questions

Popular Tags

Trending Questions