WorldDrknss Posted May 24, 2008 Share Posted May 24, 2008 I am a beginner at javascript and need to know if there is a better way to write the following code. function start() { document.getElementById('video1').onmouseover = function() { document.getElementById('overlay1').style.display = 'inline'; }; document.getElementById('overlay1').onmouseout = function() { document.getElementById('overlay1').style.display = 'none'; }; document.getElementById('video2').onmouseover = function() { document.getElementById('overlay2').style.display = 'inline'; }; document.getElementById('overlay2').onmouseout = function() { document.getElementById('overlay2').style.display = 'none'; }; document.getElementById('video3').onmouseover = function() { document.getElementById('overlay3').style.display = 'inline'; }; document.getElementById('overlay3').onmouseout = function() { document.getElementById('overlay3').style.display = 'none'; }; document.getElementById('video4').onmouseover = function() { document.getElementById('overlay4').style.display = 'inline'; }; document.getElementById('overlay4').onmouseout = function() { document.getElementById('overlay4').style.display = 'none'; }; document.getElementById('video5').onmouseover = function() { document.getElementById('overlay5').style.display = 'inline'; }; document.getElementById('overlay5').onmouseout = function() { document.getElementById('overlay5').style.display = 'none'; }; }; Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 24, 2008 Share Posted May 24, 2008 I am a beginner at javascript and need to know if there is a better way to write the following code. function start() { document.getElementById('video1').onmouseover = function() { document.getElementById('overlay1').style.display = 'inline'; }; document.getElementById('overlay1').onmouseout = function() { document.getElementById('overlay1').style.display = 'none'; }; document.getElementById('video2').onmouseover = function() { document.getElementById('overlay2').style.display = 'inline'; }; document.getElementById('overlay2').onmouseout = function() { document.getElementById('overlay2').style.display = 'none'; }; document.getElementById('video3').onmouseover = function() { document.getElementById('overlay3').style.display = 'inline'; }; document.getElementById('overlay3').onmouseout = function() { document.getElementById('overlay3').style.display = 'none'; }; document.getElementById('video4').onmouseover = function() { document.getElementById('overlay4').style.display = 'inline'; }; document.getElementById('overlay4').onmouseout = function() { document.getElementById('overlay4').style.display = 'none'; }; document.getElementById('video5').onmouseover = function() { document.getElementById('overlay5').style.display = 'inline'; }; document.getElementById('overlay5').onmouseout = function() { document.getElementById('overlay5').style.display = 'none'; }; }; Try: function start() { for(var i = 1; i < 6; i++) { var videoObj = document.getElementById("video" + i); var overlayObj = document.getElementById("overlay" + i); videoObj.onmouseover = function() { overlayObj.style.display = 'inline'; } overlayObj.onmouseout = function() { this.style.display = 'none'; } } } Quote Link to comment Share on other sites More sharing options...
WorldDrknss Posted May 24, 2008 Author Share Posted May 24, 2008 It didn't work. I have been battling this piece of code for a while now. Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 25, 2008 Share Posted May 25, 2008 Did it work before you modified it? Are you getting any errors after the modification? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted May 26, 2008 Share Posted May 26, 2008 The code I gave you should work. I made a small test case that uses the same method of appending 'i' to the id of a group of elements, and it works correctly: <html> <head> <title>JavaScript loop test</title> <script type="text/javascript"> window.onload = function() { for(var i = 1; i < 4; i++) { var divObj = document.getElementById("div" + i); divObj.onmouseover = function() { this.style["border"] = "1px solid black"; } divObj.onmouseout = function() { this.style["border"] = ""; } } } </script> </head> <body> <div id="div1"> This is div1 </div> <div id="div2"> This is div2 </div> <div id="div3"> This is div3 </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.