...

View Full Version : Javascript "getElementById" not working, help please



fleewood
06-20-2010, 01:45 PM
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');
}

Philip M
06-20-2010, 02:46 PM
Are you sure that your initial syntax is correct?


<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.

fleewood
06-20-2010, 03:30 PM
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.

abduraooft
06-20-2010, 03:59 PM
for some reason it is only calling the first element and none of the others. Please post your html as well.

PS: Please use
][/COLOR] tags to wrap your code while posting here. Thanks!

fleewood
06-20-2010, 04:51 PM
<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>

Philip M
06-20-2010, 05:10 PM
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:-


<div id = 'killstreakwin' style= "visibility:hidden">
<a href="#" onclick= "wndwClse()" >Close&nbsp;</a><br />
<img src="images/killstreak.jpg" alt="Killstreak Rewards" />
</div>

fleewood
06-20-2010, 05:35 PM
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.

abduraooft
06-20-2010, 05:45 PM
<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?

fleewood
06-20-2010, 05:58 PM
that is the HTML side, the javascript is at the top in my first post, and thats everything.

abduraooft
06-20-2010, 06:27 PM
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.

fleewood
06-20-2010, 06:37 PM
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 :-



<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

fleewood
06-22-2010, 03:00 AM
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.



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'");
}
}

Philip M
06-22-2010, 08:40 AM
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.




<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.

fleewood
06-22-2010, 01:16 PM
that doesn't work for some reason,looks like it should.

Philip M
06-22-2010, 02:00 PM
that doesn't work for some reason,looks like it should.

It works for me! :) I would not have posted it otherwise.

Old Pedant
06-23-2010, 03:49 AM
the pages have the same html tags as I have shown except for the IDs are different

Are you saying tha you do *NOT* have *ALL* of those IDs on the *SAME PAGE*???

In this code:

function windowOpen()
{
document.getElementById('killstreakwin').style.visibility='visible';
document.getElementById('standardwin').style.visibility='visible';
.. etc. ...
}

the VERY FIRST of those id's that do NOT exist on the SAME PAGE will indeed cause an error and the function will stop working.

So if you have "killstreakwin" in one window and "standardwin" in another window, *OF COURSE* it will never work.

I *can* suggest a way to make it work, if that's the case.

Oh, heck...I'll just post it:


var winIDs = [
'killstreakwin',
'standardwin',
'hardenedwin',
'veteranwin',
'prestigewin',
'perkswin',
'copycatwin',
'martyrdomwin',
'finalstandwin',
'painkillerwin',
'rankswin',
'prestigewin',
'primarywin',
'secondarywin',
'attachmentswin'
];

function windowOpen()
{
for ( var w = 0; w < winIDs.length; ++w )
{
var div = document.getElementById(winIDs[w]);
if ( div != null ) div.style.visibility = "visible";
}
}
function windowClose()
{
for ( var w = 0; w < winIDs.length; ++w )
{
var div = document.getElementById(winIDs[w]);
if ( div != null ) div.style.visibility = "hidden";
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum