Planetarion Forums

wu_trax · 28 Mar 2007, 20:27

I really dont get along with this stuff:

Code:

<script language="JavaScript">
  <!--
		function clipLogo(val) {
			var clip = new Array();
		
			clip.push("65306");
			clip.push("93535");
			clip.push("88757");
			clip.push("62455");
			clip.push("98673");
			clip.push("13907");
			for(var i=0;i<clip.length;i++) {
				if(clip[i] == val){
					if(document.getElementById("c" + val)){
						alert("c" + val);
					}
					document.getElementById("c" + val).style.display = "";
				}else{
					document.getElementById("c" + val).style.display = "none";
				}
			}
		}
	-->
</script>
<table class="formelement" border="0" cellpadding="2" cellspacing="1">
  <tr class="frmhandler_title">
    <td class="bold">Clip Logo</td>
  </tr>
  <tr bgcolor="#ECEEF6">

    <td class="normal" bgcolor="#FFFFFF" height="85">
      <div style="display:none;" id="c65306"><img src="/msd/imagepool/65306_medium.gif"></div>
      <div style="display:none;" id="c93535"><img src="/msd/imagepool/93535_medium.gif"></div>
      <div style="display:none;" id="c88757"><img src="/msd/imagepool/88757_medium.gif"></div>
      <div style="display:none;" id="c62455"><img src="/msd/imagepool/62455_medium.gif"></div>
      <div style="display:none;" id="c98673"><img src="/msd/imagepool/98673_medium.gif"></div>
      <div style="display:none;" id="c13907"><img src="/msd/imagepool/13907_medium.gif"></div>
    </td>
  </tr>

</table>

The idea is to show a different gif, depending on some user interaction, and that without a page reload.
This doesnt work, for some strange reason. Up to the alert() everything is fine. val does have the right value. If I pick the last item, I see it, but all the others i dont. Also once ive picked the last item it wont disappear after i picked another one.
Apparently the images are above each other with the last one being on top and blocking all others.
how do i fix this? It used to work, up until I started making some changes to this really ugly code.

Phil^ · 28 Mar 2007, 21:49

Code:

<html>
<script language="JavaScript">
  <!--
        function clipLogo(val) {
            var clip = new Array();
            clip.push("65306");
            clip.push("93535");
            clip.push("88757");
            clip.push("62455");
            clip.push("98673");
            clip.push("13907");
            
            for ( var i=0;i<clip.length;i++ ) {
            var elemid = "c" + clip[i];
                if ( clip[i] == val ) {
                        document.getElementById(elemid).style.display = "block";
                }
                else {
                    document.getElementById(elemid).style.display = "none";
                }
            }
        }
    -->
</script>
<body>

<table class="formelement" border="0" cellpadding="2" cellspacing="1">
  <tr class="frmhandler_title">
    <td class="bold">Clip Logo</td>
  </tr>
  <tr bgcolor="#ECEEF6">

    <td class="normal" bgcolor="#FFFFFF" height="85">
      <div id="c65306"> <img src="/msd/imagepool/65306_medium.gif"></div>
      <div id="c93535"><img src="/msd/imagepool/93535_medium.gif"></div>
      <div id="c88757"><img src="/msd/imagepool/88757_medium.gif"></div>
      <div id="c62455"><img src="/msd/imagepool/62455_medium.gif"></div>
      <div id="c98673"><img src="/msd/imagepool/98673_medium.gif"></div>
      <div id="c13907"><img src="/msd/imagepool/13907_medium.gif"></div>
    </td>
  </tr>
  <script language="JavaScript">
  <!--
  clipLogo(13907);
  -->
  </script>
  

</table>
</body>
</html>

You got mixed up with the element you wanted, and the element in the loop
Also the setting of the display was outside of the if block which controlled when to do it