koorosh13hm Posted May 7, 2015 Share Posted May 7, 2015 (edited) Hi everyone, I have tried to assign an event to a member inside an object by using an anonymous function. In the code below the result would not be gained and I even see no errors in the console. Could you please help me fix this issue? Thank you very much in advance. <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>2js</title> <style type="text/css"> div.box { background-color: hsl(0, 0%, 0%); margin-left: 2px; width: 2px; height: 2px; margin-top: 2px; display: block; border-radius: 0.5px; float: left; } div.wrapper { width: 1000px; height: 800px; margin: 0 auto; background-color: #000000; } </style></head><body><div class="wrapper"> </div><script type="text/javascript"> window.onload = function init(){ var wrappers = document.getElementsByClassName("wrapper")[0]; for (var i=0; i<=49999; i++){ var newDiv = document.createElement("div"); newDiv.id = "box" + i; newDiv.className = "box"; wrappers.appendChild(newDiv); } var boxs = document.getElementsByClassName("box"); console.log("boxs length is: " + boxs.length); //here is to check the type of boxs if (Array.isArray(boxs)){ console.log("boxs is of type Array."); }else{ console.log("boxs is of type: " + typeof boxs); //object is returned } for (var item in boxs){ if (boxs.hasOwnProperty(item)){ console.log(item + "->" + boxs[item]); //the result would be like: box49999->[object HTMLDivElement] } item.onmousemove = function (){ //Here is where I supposed would return the result item.style.backgroundColor = "green"; console.log("ever done?"); //it results nothing!! } };} //end of script tag</script></body></html> Edited May 7, 2015 by koorosh13hm Link to comment Share on other sites More sharing options...
davej Posted May 7, 2015 Share Posted May 7, 2015 Try... <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>2js</title><style> div.box { background-color: hsl(0, 0%, 0%); margin-left: 2px; width: 8px; height: 8px; margin-top: 2px; display: block; border-radius: 0.5px; float: left; } div.wrapper { width: 1000px; height: 800px; margin: 0 auto; background-color: #000000; }</style><script>window.onload = function() { var wrapper = document.getElementsByClassName("wrapper")[0]; console.log('create boxes'); for (var i=0; i<=7999; i++){ var newDiv = document.createElement("div"); newDiv.id = "box" + i; newDiv.className = "box"; wrapper.appendChild(newDiv); } var boxs = document.getElementsByClassName("box"); console.log("boxs length is: " + boxs.length); if (Array.isArray(boxs)){ console.log("boxs is of type Array."); }else{ console.log("boxs is of type: " + typeof boxs); } console.log("assign event handlers"); for (var keyi in boxs){ //console.log('boxs['+ keyi +'].id = '+ boxs[keyi].id); boxs[keyi].onmouseover = function(){ this.style.backgroundColor = 'green'; } } console.log("done"); } //end onload </script></head><body> <div class="wrapper"></div> </body></html> ...however this is NOT a good example of "How to loop through different keys of an object." Link to comment Share on other sites More sharing options...
koorosh13hm Posted May 9, 2015 Author Share Posted May 9, 2015 Awesome. Thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now