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'; }; }; Link to comment https://forums.phpfreaks.com/topic/107107-code-cleanup/ 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'; } } } Link to comment https://forums.phpfreaks.com/topic/107107-code-cleanup/#findComment-549176 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. Link to comment https://forums.phpfreaks.com/topic/107107-code-cleanup/#findComment-549190 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? Link to comment https://forums.phpfreaks.com/topic/107107-code-cleanup/#findComment-549376 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> Link to comment https://forums.phpfreaks.com/topic/107107-code-cleanup/#findComment-550247 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.