This question already has an answer here:
The Javascript is not running in my browser and if I paste the same the same code in Chrome console window, it just run fine. The script is included in my html like if I add alert in my script it runs without any errors, is there anything with DOM Manipulation ?
var colors = [
"rgb(255, 0, 0)",
"rgb(255, 255, 0)",
"rgb(255, 0, 255)",
"rgb(0, 255, 0)",
"rgb(0, 0, 255)",
"rgb(0, 255, 255)",
]
var square = document.querySelectorAll(".squares");
for( i = 0; i < square.length; i++){
square[i].style.backgroundColor = colors[i];
}
console.log("Complete color application")
body{
background-color: #232323;
}
.squares{
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container{
margin: 0 auto;
max-width: 600px;
}
h1{
color: #ffffff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Color Game</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="code.js"></script>
</head>
<body>
<h1>The Great RGB Color Game</h1>
<div class="">
<span id="message"></span>
</div>
<div id="container">
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
<div class="squares"></div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire