if ... else help required please

[tompage]

I am using javascript to swap the hidden/visible property of some CSS styles but unfotunately the function code seems to stall with my if...else statement (I have been putting alert messages in different places to show where is being reached.

I have five DIV classes job0, job1,..., job4 already defined. The user selects a job from a list of five in a form in the page. The code is then supposed to swap the visibility of the relevant div to visible.

If I put an alert in immediately before the if statement to display the 3 variables, they all display correctly but if I put in an alert as the first action in either the if or the else statement, it does not get actioned.

Code is as follows:

function displayJob() {
var jobList = document.forms[0].FIRSTCHOICE
var chosenJob = jobList.selectedIndex
for (i=0; i<5; i++) {
jobDIV = "job" + i
if (chosenJob == i) { document.getElementById(jobDIV).style.visibility = "visible" }
else { document.getElementById(jobDIV).style.visibility = "hidden" }
}
}

Does anyone know why this is not working?

[Purple Martin]

I just tested your code and it worked perfectly first time.

If you want to put alerts (or anything else) into the if statement, it can be easier to work with if you put it on separate lines like this:

if (chosenJob == i) {
document.getElementById(jobDIV).style.visibility = "visible"
} else {
document.getElementById(jobDIV).style.visibility = "hidden"
}

I also like to indent the second and fourth lines for clarity but WebmasterWorld pages won't show the indentation.

[tompage]

Thanks

When I put the alerts in I did put them on separate lines and indent as you suggest. I only put them back on one line to aid readability.

Might it be a browser issue? I wasn't aware that browsers wold have any issues with relatively simple javascript?

[garann]

Might it be a browser issue? I wasn't aware that browsers wold have any issues with relatively simple javascript?

Doubtful. I just tested this in IE6, Opera, and NS7, and it works just fine in all three. Could the trouble be something in your HTML? For instance, when you say

I have five DIV classes job0, job1,..., job4

is that a typo? If the classes are job0 - job4, this isn't going to work. Those should be the IDs.

[tompage]

I had already spotted that one and changed it since I posted my original email.

I think actually with further investigation (and the installation of a debug menu in my browser (Safari/Mac)) that the problem is with the statement:

document.getElementById(jobDIV).style.visibility = "hidden"

as it is returning a null value and doing nothing. In fact if I try to isolate it further, it says that "getElementById(jobDIV)" has an undefined value. I know that jobDIV has the value "job0" to start with.

However I have defined the style in the header with the starting default property hidden with:

#job0 { visibility: hidden; }
#job1 { visibility: hidden; }
etc.

I then have the actual divs in the body with:

<div id="job0">content0</div>
<div id="job1">content1</div>
etc

I still cannot quite get it to work!

[tompage]

Well I haven't found an answer to this question, but frustraion sent me down a different path which does appear to work.

Instead of swapping the visibility attribute of the style of each div, I have swapped the class of each div. So I now have two classes defined:

.visible {
position: absolute;
display: block;
visibility: visible;
[other layout/formatting]
}
.hidden { display: none; }

the javascript:

document.getElementById(jobDIV).className = "hidden";
if (chosenJob == i) {
document.getElementById(jobDIV).className = "visible";
} else { continue }

and in the body:

<div id="job0" class="visible">&nbsp;</div>
<div id="job1" class="hidden">content</div>
etc

I think what also helped was adding "else {continue}" to prevent the loop stopping if the "if" condition was not satisfied. Should that have stopped the loop?

[Purple Martin]

I think actually with further investigation (and the installation of a debug menu in my browser (Safari/Mac)) that the problem is with the statement:

document.getElementById(jobDIV).style.visibility = "hidden"

as it is returning a null value and doing nothing. In fact if I try to isolate it further, it says that "getElementById(jobDIV)" has an undefined value. I know that jobDIV has the value "job0" to start with.

Just a thought: IDs must be unique i.e. there can only be one div with id="job0" in the document. I expect you alredy knew this, but I thought I'd mention it because having multiple identical IDs will cause the problem you mentioned.