Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Javascript "getElementById" not working, help please

    Hi, I am trying to show and hide different div objects on a webpage all with different ID's as you can see. Only the first object will work "('killstreakwin')", or any that is put first, none of the others work after that. It's not the HTML side, it's definatly the javascript function. I've tried to use a loop but I don't know how to implement it into something like this. Any help would be appreciated.

    This is the code I am using:-

    function windowOpen() {
    (document.getElementById('killstreakwin').style.visibility='visible');
    (document.getElementById('standardwin').style.visibility='visible');
    (document.getElementById('hardenedwin').style.visibility='visible');
    (document.getElementById('veteranwin').style.visibility='visible');
    (document.getElementById('prestigewin').style.visibility='visible');
    (document.getElementById('perkswin').style.visibility='visible');
    (document.getElementById('copycatwin').style.visibility='visible');
    (document.getElementById('martyrdomwin').style.visibility='visible');
    (document.getElementById('finalstandwin').style.visibility='visible');
    (document.getElementById('painkillerwin').style.visibility='visible');
    (document.getElementById('rankswin').style.visibility='visible');
    (document.getElementById('prestigewin').style.visibility='visible');
    (document.getElementById('primarywin').style.visibility='visible');
    (document.getElementById('secondarywin').style.visibility='visible');
    (document.getElementById('attachmentswin').style.visibility='visible');
    }

    function windowClose() {
    (document.getElementById('killstreakwin').style.visibility='hidden');
    (document.getElementById('standardwin').style.visibility='hidden');
    (document.getElementById('hardenedwin').style.visibility='hidden');
    (document.getElementById('veteranwin').style.visibility='hidden');
    (document.getElementById('prestigewin').style.visibility='hidden');
    (document.getElementById('perkswin').style.visibility='hidden');
    (document.getElementById('copycatwin').style.visibility='hidden');
    (document.getElementById('martyrdomwin').style.visibility='hidden');
    (document.getElementById('finalstandwin').style.visibility='hidden');
    (document.getElementById('painkillerwin').style.visibility='hidden');
    (document.getElementById('rankswin').style.visibility='hidden');
    (document.getElementById('prestigewin').style.visibility='hidden');
    (document.getElementById('primarywin').style.visibility='hidden');
    (document.getElementById('secondarywin').style.visibility='hidden');
    (document.getElementById('attachmentswin').style.visibility='hidden');
    }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Are you sure that your initial syntax is correct?

    Code:
    <div id = 'killstreakwin' style= "visibility:hidden">ABC</div>
    <div id = 'standardwin' style= "visibility:hidden">DEF</div>
    <div id = 'hardenedwin' style= "visibility:hidden">XYZ</div>
    
    <script type = "text/javascript">
    
    alert ("Show them!");
    (document.getElementById('killstreakwin').style.visibility='visible');  // the outermost brackets are redundant
    document.getElementById('standardwin').style.visibility='visible';
    document.getElementById('hardenedwin').style.visibility='visible';
    alert ("Hide them!");
    document.getElementById('killstreakwin').style.visibility='hidden';
    document.getElementById('standardwin').style.visibility='hidden';
    document.getElementById('hardenedwin').style.visibility='hidden';
    
    </script>

    Jesus saves, Moses invests, Allah protects, and Cthulhu thinks you'd make a nice sandwich.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have tried the code you posted before and it didn't work, everything else is definatly correct its just this script that is the problem. for some reason it is only calling the first element and none of the others.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    for some reason it is only calling the first element and none of the others.
    Please post your html as well.

    PS: Please use [CODE][/CODE] tags to wrap your code while posting here. Thanks!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Code:
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/killstreak rewards.jpg" alt="Killstreak Rewards" />
    </a>
    
    <div id="killstreakwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/killstreak.jpg" alt="Killstreak Rewards" />
    </div>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    I have the idea that windowOpen and windowClose as function names may be confusing the browser. Try changing them. The javascript: is not required and should be deleted.

    You should set the initial style of the divs as follows:-

    Code:
    <div id = 'killstreakwin' style= "visibility:hidden">
    <a href="#" onclick= "wndwClse()" >Close&nbsp;</a><br />
    <img src="images/killstreak.jpg" alt="Killstreak Rewards" />
    </div>
    Last edited by Philip M; 06-20-2010 at 05:18 PM.

  • #7
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Good idea but that hasn't worked either, it is still just calling the first line of the javascript. I don't understand why it isn't working.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by fleewood View Post
    Code:
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/killstreak rewards.jpg" alt="Killstreak Rewards" />
    </a>
    
    <div id="killstreakwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/killstreak.jpg" alt="Killstreak Rewards" />
    </div>
    Is that your full code?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that is the HTML side, the javascript is at the top in my first post, and thats everything.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by fleewood View Post
    that is the HTML side, the javascript is at the top in my first post, and thats everything.
    Then what about all those id attributes in your original post. I'm asking you to post all the involved html is just to ensure that the issue with the script is not due to any kind of errors in your markup.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    they are on different pages, the javascript is from an external .js file. all the pages have the same html tags as I have shown except for the IDs are different. but if you want to see it all then it is here :-

    Code:
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/prestigessmall.jpg" alt="Prestiges" name="Prestiges" />
    </a>
    <br />
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/rankssmall.jpg" alt="Ranks" name="Ranks" />
    </a>
    </div>
    
    <!-- Popup Window -->
    
    <div id="prestigewin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/prestiges.jpg" alt="Prestiges" />
    </div>
    
    <div id="rankswin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/ranks.png" alt="Ranks" />
    </div>
    
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/perkssmall.jpg" alt="Perks" name="Perks" />
    </a>
    <br />
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/copycat.png" alt="Copycat" name="Copycat" />
    </a>
    <br />
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/final stand.png" alt="Final Stand" name="Final Stand" />
    </a>
    <br />
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/martyrdom.png" alt="Martyrdom" name="Martyrdom" />
    </a>
    <br />
    <a href="#" onclick="javascript:windowOpen();">
    <img src="images/painkiller.png" alt="Painkiller" name="Painkiller" />
    </a>
    </div>
    
    <!-- Popup Window -->
    
    <div id="perkswin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/perks.jpg" alt="Perks" />
    </div>
    
    <div id="copycatwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/copycat.png" alt="Copycat" />
    </div>
    
    <div id="finalstandwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/final stand.png" alt="Final Stand" />
    </div>
    
    <div id="martyrdomwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/martyrdom.png" alt="Martyrdom" />
    </div>
    
    <div id="painkillerwin" class="windows">
    <a href="#" onclick="javascript:windowClose();">Close&nbsp;</a><br />
    <img src="images/painkiller.png" alt="Painkiller" />
    </div>
    
    <a href="#" onclick="javascript:wndwOpn();">
    <img src="images/primary weaponssmall.jpg" alt="Primary Weapons" name="Primary Weapons" />
    </a>
    <br />
    <a href="#" onclick="javascript:wndwOpn();">
    <img src="images/secondary weaponssmall.jpg" alt="Secondary Weapons" name="Secondary Weapons" />
    </a>
    <br />
    <a href="#" onclick="javascript:wndwOpn();">
    <img src="images/weapon attachmentssmall.jpg" alt="Weapon Attachments" name="Weapon Attachments" />
    </a>
    </div>
    
    <!-- Popup Window -->
    
    <div id="primarywin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/primary weapons.jpg" alt="Primary Weapons" />
    </div>
    
    <div id="secondarywin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/secondary weapons.jpg" alt="Secondary Weapons" />
    </div>
    
    <div id="attachmentswin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/weapon attachments.jpg" alt="Weapon Attachments" />
    </div>
    
    <a href="#" onclick="wndwOpn();">
    <img src="images/codstandardeditionsmall.png" alt="Standard Edition" name="Standard Edition" />
    </a>
    <br />
    <a href="#" onclick="wndwOpn();">
    <img src="images/codhardenededitionsmall.jpg" alt="Hardened Edition" name="Hardened Edition" />
    </a>
    <br />
    <a href="#" onclick="wndwOpn();">
    <img src="images/codveteraneditionsmall.jpg" alt="Veteran Edition" name="Veteran Edition" />
    </a>
    <br />
    <a href="#" onclick="wndwOpn();">
    <img src="images/codprestigeeditionsmall.jpg" alt="Prestige Edition" name="Prestiger Edition" />
    </a>
    
    <!-- Popup Windows -->
    
    <div id="standardwin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/codstandardedition.png" alt="Standard Edition" />
    </div>
    
    <div id="hardenedwin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/codhardenededition.jpg" alt="Hardened Edition" />
    </div>
    
    <div id="veteranwin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/codveteranedition.jpg" alt="Veteran Edition" />
    </div>
    
    <div id="standardwin" class="windows">
    <a href="#" onclick="javascript:wndwClse();">Close&nbsp;</a><br />
    <img src="images/codprestigeedition.jpg" alt="Prestige Edition" />
    </div>
    
    <a href="#" onclick="wndwOpn();">
    <img src="images/killstreak rewards.jpg" alt="Killstreak Rewards" />
    </a>
    
    <div id="killstreakwin" class="windows">
    <a href="#" onclick="wndwClse();">Close&nbsp;</a><br />
    <img src="images/killstreak.jpg" alt="Killstreak Rewards" />
    </div>
    remember these are all in different .html pages

  • #12
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I found something similar to what I wanted but I have to use "div" and a number e.g "div0", "div1" etc. I would still like to know if there is any way to use full words e.g "standard", "hardened" etc.

    Code:
    numdivs=4
    
    function init() {
    	showDiv(0);
    }
    function showDiv( which ) {
    	for(i=0;i<numdivs;i++) {
    		eval("document.getElementById('div"+i+"').style.visibility='hidden'");
    	}
    	 eval("document.getElementById('div"+which+"').style.visibility='visible'");
    }
    
    function hideDiv() {
    	for(i=0;i<numdivs;i++){
    	eval("document.getElementById('div"+i+"').style.visibility='hidden'");	
    	}
    }

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by fleewood View Post
    I found something similar to what I wanted but I have to use "div" and a number e.g "div0", "div1" etc. I would still like to know if there is any way to use full words e.g "standard", "hardened" etc.
    Code:
    <div id = "One">ABC</div>
    <div id = "Two">DEF</div>
    <div id = "Three">GHJ</div>
    <div id = "Four">JLK</div>
    
    <input type = "button" value = "Show Divs" onclick = "showDiv()"><br>
    <input type = "button" value = "Hide Divs" onclick = "hideDiv()">
    
    <script type = "text/javascript">
    
    var divNames = ["One","Two","Three","Four"];
    var numdivs = divNames.length;
    
    function showDiv( which ) {
    for (i=0;i<numdivs;i++) {
    document.getElementById(divNames[i]).style.display = "block";
    // or .style.visibility= "visible";
    }
    }
    
    function hideDiv() {
    for (i=0;i<numdivs;i++){
    document.getElementById(divNames[i]).style.display = "none";
    // or .style.visibility= "hidden";	
    }
    }
    
    </script>

    But obviously the divs must all be on the same page. You cannot apply script to one page with code in another.
    Last edited by Philip M; 06-22-2010 at 09:13 AM.

  • #14
    New Coder
    Join Date
    Jun 2010
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts
    that doesn't work for some reason,looks like it should.
    Last edited by fleewood; 06-22-2010 at 01:51 PM.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by fleewood View Post
    that doesn't work for some reason,looks like it should.
    It works for me! I would not have posted it otherwise.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •