Jump to content

Code Cleanup

WorldDrknss

By WorldDrknss
in Javascript Help

Recommended Posts

WorldDrknss Member

WorldDrknss

Posted
Posted

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
KevinM1 Advanced Member

KevinM1

Posted
Posted

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
KevinM1 Advanced Member

KevinM1

Posted
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.