javascript - BackgroundColor Undefined -
i don't understand why isn't working. says backgroundcolor undefined. i'm trying change color when clicked , clicking works won't change colors.i think else works minus that, on here can me. or if have suggestions on how improve great.
var squares=document.getelementsbyclassname('squares'); for(var = 0; < squares.length; i++) { squares[0].addeventlistener("click", changecolor); } function changecolor(event) { console.log("i work"); event.style.backgroundcolor=randomcolor(); } //the code below fine if you're trying debug you've gone far function randomcolor() { var randomred = math.floor(math.random() * 255); var randomgreen = math.floor(math.random() * 255); var randomblue = math.floor(math.random() * 255); //create string ‘random color’ var randomcolor = "rgb("+randomred+","+randomgreen+","+randomblue+")"; return randomcolor; }<!doctype html> <html> <head> <title>fix it.</title> <style> .square { width: 100px; height: 100px; background-color: #000000; margin: 5px; } </style> </head> <body> <div id="container"> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> </div> <script src="main.js"></script> </body> </html>
it should event.target when set backgroundcolor.
like this: (event.target).style.backgroundcolor=randomcolor();
event.target refer div element clicked. way add style.
so, changed code looks below:
var squares=document.getelementsbyclassname('squares'); for(var = 0; < squares.length; i++) { squares[0].addeventlistener("click", changecolor); } function changecolor(event) { console.log("i work"); (event.target).style.backgroundcolor=randomcolor(); // observe difference here } //the code below fine if you're trying debug you've gone far function randomcolor() { var randomred = math.floor(math.random() * 255); var randomgreen = math.floor(math.random() * 255); var randomblue = math.floor(math.random() * 255); //create string ‘random color’ var randomcolor = "rgb("+randomred+","+randomgreen+","+randomblue+")"; return randomcolor; }<!doctype html> <html> <head> <title>fix it.</title> <style> .square { width: 100px; height: 100px; background-color: #000000; margin: 5px; } </style> </head> <body> <div id="container"> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> <div class="square" onclick="changecolor(event)"></div> </div> <script src="main.js"></script> </body> </html>
Comments
Post a Comment