Random HTML elements are unaffected by javascript

I have a rather weird issue with this page. The page itself is pretty ugly, which probably doesn't help the situation much.

In the code, you will see that when an item is selected from a drop down, a javascript function is called up which is supposed to make some hidden items visible based on which item was selected. However, when there are upwards of 20 records on the page, some elements are randomly skipped and remain hidden. Its quite bizarre as there is seemingly no pattern to which elements are skipped.

Here is the javascript function (the second 'if' is where i think the issue is):

function fncEnable(x)
   {
        theform=document.form1      

            //first, we reset everything to be hidden and unchecked
        document.getElementById("when"+x).style.visibility = "hidden";
        document.getElementById("first"+x).style.visibility = "hidden";
        document.getElementById("when2"+x).style.visibility = "hidden";
        document.getElementById("second"+x).style.visibility = "hidden";
        document.getElementById("when3"+x).style.visibility = "hidden";
        document.getElementById("third"+x).style.visibility = "hidden";
        document.getElementById("when4"+x).style.visibility = "hidden";
        document.getElementById("fourth"+x).style.visibility = "hidden";
        document.getElementById("sun"+x).checked = false;
        document.getElementById("mon"+x).checked = false;
        document.getElementById("tues"+x).checked = false;
        document.getElementById("wed"+x).checked = false;
        document.getElementById("thurs"+x).checked = false;
        document.getElementById("fri"+x).checked = false;
        document.getElementById("sat"+x).checked = false;

        if(document.getElementById("howoften"+x).value == 1)
        {
            document.getElementById("sun"+x).checked = true;
            document.getElementById("mon"+x).checked = true;
            document.getElementById("tues"+x).checked = true;
            document.getElementById("wed"+x).checked = true;
            document.getElementById("thurs"+x).checked = true;
            document.getElementById("fri"+x).checked = true;
            document.getElementById("sat"+x).checked = true;
            document.getElementById("sun"+x).disabled = false;
            document.getElementById("mon"+x).disabled = false;
            document.getElementById("tues"+x).disabled = false;
            document.getElementById("wed"+x).disabled = false;
            document.getElementById("thurs"+x).disabled = false;
            document.getElementById("fri"+x).disabled = false;
            document.getElementById("sat"+x).disabled = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";//randomly, this line is skipped.

        }
        if(document.getElementById("howoften"+x).value == 2)
        {
            document.getElementById("sun"+x).checked = true;
            document.getElementById("mon"+x).checked = true;
            document.getElementById("tues"+x).checked = true;
            document.getElementById("wed"+x).checked = true;
            document.getElementById("thurs"+x).checked = true;
            document.getElementById("fri"+x).checked = true;
            document.getElementById("sat"+x).checked = true;
            document.getElementById("sun"+x).disabled = false;
            document.getElementById("mon"+x).disabled = false;
            document.getElementById("tues"+x).disabled = false;
            document.getElementById("wed"+x).disabled = false;
            document.getElementById("thurs"+x).disabled = false;
            document.getElementById("fri"+x).disabled = false;
            document.getElementById("sat"+x).disabled = false;
            document.getElementById("when"+x).style.visibility = "visible";//this line is never skipped;
            document.getElementById("first"+x).style.visibility = "visible";//randomly, this line is skipped.
            document.getElementById("when2"+x).style.visibility = "visible";//this line is never skipped.
            document.getElementById("second"+x).style.visibility = "visible";//this line, is never skipped.

        }

        if(document.getElementById("howoften"+x).value == 3)
        {
            document.getElementById("sun"+x).checked = true;
            document.getElementById("mon"+x).checked = true;
            document.getElementById("tues"+x).checked = true;
            document.getElementById("wed"+x).checked = true;
            document.getElementById("thurs"+x).checked = true;
            document.getElementById("fri"+x).checked = true;
            document.getElementById("sat"+x).checked = true;
            document.getElementById("sun"+x).disabled = false;
            document.getElementById("mon"+x).disabled = false;
            document.getElementById("tues"+x).disabled = false;
            document.getElementById("wed"+x).disabled = false;
            document.getElementById("thurs"+x).disabled = false;
            document.getElementById("fri"+x).disabled = false;
            document.getElementById("sat"+x).disabled = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";
            document.getElementById("when2"+x).style.visibility = "visible";
            document.getElementById("second"+x).style.visibility = "visible";
            document.getElementById("when3"+x).style.visibility = "visible";
            document.getElementById("third"+x).style.visibility = "visible";
        }

        if(document.getElementById("howoften"+x).value == 4)
        {
            document.getElementById("sun"+x).checked = true;
            document.getElementById("mon"+x).checked = true;
            document.getElementById("tues"+x).checked = true;
            document.getElementById("wed"+x).checked = true;
            document.getElementById("thurs"+x).checked = true;
            document.getElementById("fri"+x).checked = true;
            document.getElementById("sat"+x).checked = true;
            document.getElementById("sun"+x).disabled = false;
            document.getElementById("mon"+x).disabled = false;
            document.getElementById("tues"+x).disabled = false;
            document.getElementById("wed"+x).disabled = false;
            document.getElementById("thurs"+x).disabled = false;
            document.getElementById("fri"+x).disabled = false;
            document.getElementById("sat"+x).disabled = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";
            document.getElementById("when2"+x).style.visibility = "visible";
            document.getElementById("second"+x).style.visibility = "visible";
            document.getElementById("when3"+x).style.visibility = "visible";
            document.getElementById("third"+x).style.visibility = "visible";
            document.getElementById("when4"+x).style.visibility = "visible";
            document.getElementById("fourth"+x).style.visibility = "visible";
        }




        if(document.getElementById("howoften"+x).value == 5)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";
        }


        if(document.getElementById("howoften"+x).value == 6)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";
        }

        if(document.getElementById("howoften"+x).value == 7)
        {
            document.getElementById("sun"+x).disabled = false;
            document.getElementById("mon"+x).disabled = false;
            document.getElementById("tues"+x).disabled = false;
            document.getElementById("wed"+x).disabled = false;
            document.getElementById("thurs"+x).disabled = false;
            document.getElementById("fri"+x).disabled = false;
            document.getElementById("sat"+x).disabled = false;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";
        }

        if(document.getElementById("howoften"+x).value == 8)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;

        }

        if(document.getElementById("howoften"+x).value == 9)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;

        }
        if(document.getElementById("howoften"+x).value == 10)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("sun"+x).checked = false;
            document.getElementById("mon"+x).checked = false;
            document.getElementById("tues"+x).checked = false;
            document.getElementById("wed"+x).checked = false;
            document.getElementById("thurs"+x).checked = false;
            document.getElementById("fri"+x).checked = false;
            document.getElementById("sat"+x).checked = false;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";

        }

        if(document.getElementById("howoften"+x).value == 11)
        {

            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";

        }

        if(document.getElementById("howoften"+x).value == 12)
        {
            document.getElementById("sun"+x).disabled = true;
            document.getElementById("mon"+x).disabled = true;
            document.getElementById("tues"+x).disabled = true;
            document.getElementById("wed"+x).disabled = true;
            document.getElementById("thurs"+x).disabled = true;
            document.getElementById("fri"+x).disabled = true;
            document.getElementById("sat"+x).disabled = true;
            document.getElementById("when"+x).style.visibility = "visible";
            document.getElementById("first"+x).style.visibility = "visible";

        }
   }  

Any ideas as to why those lines are skipped?

UPDATE:

I went through and redid the function a little bit so it would be smaller, and I still get the same behavior.

function fncEnable(x)
    {
    var howoften = document.getElementById("howoften"+x).value;
    if(howoften == 1 || howoften == 2 || howoften == 3 || howoften == 4)
    {
        document.getElementById("sun"+x).checked = true;
        document.getElementById("mon"+x).checked = true;
        document.getElementById("tues"+x).checked = true;
        document.getElementById("wed"+x).checked = true;
        document.getElementById("thurs"+x).checked = true;
        document.getElementById("fri"+x).checked = true;
        document.getElementById("sat"+x).checked = true;
        document.getElementById("sun"+x).disabled = false;
        document.getElementById("mon"+x).disabled = false;
        document.getElementById("tues"+x).disabled = false;
        document.getElementById("wed"+x).disabled = false;
        document.getElementById("thurs"+x).disabled = false;
        document.getElementById("fri"+x).disabled = false;
        document.getElementById("sat"+x).disabled = false;
    }
    else if (howoften == 7)
    {
        document.getElementById("sun"+x).checked = false;
        document.getElementById("mon"+x).checked = false;
        document.getElementById("tues"+x).checked = false;
        document.getElementById("wed"+x).checked = false;
        document.getElementById("thurs"+x).checked = false;
        document.getElementById("fri"+x).checked = false;
        document.getElementById("sat"+x).checked = false;
        document.getElementById("sun"+x).disabled = false;
        document.getElementById("mon"+x).disabled = false;
        document.getElementById("tues"+x).disabled = false;
        document.getElementById("wed"+x).disabled = false;
        document.getElementById("thurs"+x).disabled = false;
        document.getElementById("fri"+x).disabled = false;
        document.getElementById("sat"+x).disabled = false;
    }
    else
    {
        document.getElementById("sun"+x).checked = false;
        document.getElementById("mon"+x).checked = false;
        document.getElementById("tues"+x).checked = false;
        document.getElementById("wed"+x).checked = false;
        document.getElementById("thurs"+x).checked = false;
        document.getElementById("fri"+x).checked = false;
        document.getElementById("sat"+x).checked = false;
        document.getElementById("sun"+x).disabled = true;
        document.getElementById("mon"+x).disabled = true;
        document.getElementById("tues"+x).disabled = true;
        document.getElementById("wed"+x).disabled = true;
        document.getElementById("thurs"+x).disabled = true;
        document.getElementById("fri"+x).disabled = true;
        document.getElementById("sat"+x).disabled = true;
    }

    if(howoften == 4)
    {
        document.getElementById("when"+x).style.visibility = "visible";
        document.getElementById("first"+x).style.visibility = "visible";

        document.getElementById("when2"+x).style.visibility = "visible";
        document.getElementById("second"+x).style.visibility = "visible";

        document.getElementById("when3"+x).style.visibility = "visible";
        document.getElementById("third"+x).style.visibility = "visible";

        document.getElementById("when4"+x).style.visibility = "visible";
        document.getElementById("fourth"+x).style.visibility = "visible";
    }
    else if (howoften == 3)
    {
        document.getElementById("when"+x).style.visibility = "visible";
        document.getElementById("first"+x).style.visibility = "visible";

        document.getElementById("when2"+x).style.visibility = "visible";
        document.getElementById("second"+x).style.visibility = "visible";

        document.getElementById("when3"+x).style.visibility = "visible";
        document.getElementById("third"+x).style.visibility = "visible";

        document.getElementById("when4"+x).style.visibility = "hidden";
        document.getElementById("fourth"+x).style.visibility = "hidden";
    }
    else if (howoften == 2)
    {
        document.getElementById("when"+x).style.visibility = "visible";
        document.getElementById("first"+x).style.visibility = "visible";

        document.getElementById("when2"+x).style.visibility = "visible";
        document.getElementById("second"+x).style.visibility = "visible";

        document.getElementById("when3"+x).style.visibility = "hidden";
        document.getElementById("third"+x).style.visi开发者_如何学Pythonbility = "hidden";

        document.getElementById("when4"+x).style.visibility = "hidden";
        document.getElementById("fourth"+x).style.visibility = "hidden";
    }
    else if (howoften == 1)
    {
        document.getElementById("when"+x).style.visibility = "visible";
        document.getElementById("first"+x).style.visibility = "visible";

        document.getElementById("when2"+x).style.visibility = "hidden";
        document.getElementById("second"+x).style.visibility = "hidden";

        document.getElementById("when3"+x).style.visibility = "hidden";
        document.getElementById("third"+x).style.visibility = "hidden";

        document.getElementById("when4"+x).style.visibility = "hidden";
        document.getElementById("fourth"+x).style.visibility = "hidden";
    }
    else
    {
        document.getElementById("when"+x).style.visibility = "hidden";
        document.getElementById("first"+x).style.visibility = "hidden";

        document.getElementById("when2"+x).style.visibility = "hidden";
        document.getElementById("second"+x).style.visibility = "hidden";

        document.getElementById("when3"+x).style.visibility = "hidden";
        document.getElementById("third"+x).style.visibility = "hidden";

        document.getElementById("when4"+x).style.visibility = "hidden";
        document.getElementById("fourth"+x).style.visibility = "hidden";
    }

Its probably not the best way, but it only took a few minutes.

As for the HTML, it looks well formed to me, but I could be missing something. Here are the relevant elements:

<table border="0" align="left" style="padding-bottom:10px">
    <tr valign="baseline">
        <td align="left" width="25%">Day(s) of the Week: </td>
        <td>Sun</td>
        <td>Mon</td>
        <td>Tues</td>
        <td>Wed</td>
        <td>Thurs</td>
        <td>Fri</td>
        <td>Sat</td>
    </tr>

    <tr valign="baseline">

        <td>&nbsp;</td>
        <td><input type="checkbox" disabled="disabled" id="sun<cfoutput>#Peoplecount#</cfoutput>"   name="sun<cfoutput>#Peoplecount#</cfoutput>"   value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="mon<cfoutput>#Peoplecount#</cfoutput>"   name="mon<cfoutput>#Peoplecount#</cfoutput>"   value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="tues<cfoutput>#Peoplecount#</cfoutput>"  name="tues<cfoutput>#Peoplecount#</cfoutput>"  value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="wed<cfoutput>#Peoplecount#</cfoutput>"   name="wed<cfoutput>#Peoplecount#</cfoutput>"   value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="thurs<cfoutput>#Peoplecount#</cfoutput>" name="thurs<cfoutput>#Peoplecount#</cfoutput>" value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="fri<cfoutput>#Peoplecount#</cfoutput>"   name="fri<cfoutput>#Peoplecount#</cfoutput>"   value="" /></td>
        <td><input type="checkbox" disabled="disabled" id="sat<cfoutput>#Peoplecount#</cfoutput>"   name="sat<cfoutput>#Peoplecount#</cfoutput>"   value="" /></td>

    </tr>
</table>
<table border="0" align="left" style="padding-bottom:10px">
    <tr valign="baseline">
        <td width="25%"><label style="visibility:hidden" id="first<cfoutput>#Peoplecount#</cfoutput>">Dose Time:</label></td>
        <td width="25%"><label style="visibility:hidden" id="second<cfoutput>#Peoplecount#</cfoutput>">Second Dose:</label></td>
        <td width="25%"><label style="visibility:hidden" id="third<cfoutput>#Peoplecount#</cfoutput>">Third Dose:</label></td>
        <td width="25%"><label style="visibility:hidden" id="fourth<cfoutput>#Peoplecount#</cfoutput>">Fourth Dose:</label></td>
    </tr>
    <tr>
        <td>
            <select name="when<cfoutput>#Peoplecount#</cfoutput>"  style="visibility:hidden" size="1" id="when<cfoutput>#Peoplecount#</cfoutput>">
                <option value="">Select A Time</option>
                <cfloop query="thetimes">
                    <option value="<cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput>"><cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput></option>
                </cfloop>
            </select>
            &nbsp;
        </td>


        <td>
            <select name="when2<cfoutput>#Peoplecount#</cfoutput>" style="visibility:hidden"  size="1"  id="when2<cfoutput>#Peoplecount#</cfoutput>">
                <option value="">Select A Time</option>
                <cfloop query="thetimes">
                    <option value="<cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput>"><cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput></option>
                </cfloop>
            </select>
            &nbsp;
        </td>


        <td>
            <select name="when3<cfoutput>#Peoplecount#</cfoutput>" style="visibility:hidden"  size="1"  id="when3<cfoutput>#Peoplecount#</cfoutput>">
                <option value="">Select A Time</option>
                <cfloop query="thetimes">
                    <option value="<cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput>"><cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput></option>
                </cfloop>
            </select>
            &nbsp;
        </td>

        <td>
            <select name="when4<cfoutput>#Peoplecount#</cfoutput>" style="visibility:hidden"  size="1"  id="when4<cfoutput>#Peoplecount#</cfoutput>">
                <option value="">Select A Time</option>
                <cfloop query="thetimes">
                    <option value="<cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput>"><cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput></option>
                </cfloop>
                </select>
            &nbsp;
        </td>
    </tr>
</table>

I know this is horrifying, but that's why I don't want to have to redo it. I've got my own stuff to do, and I don't want to spend a ton of time redoing others' work if I can avoid it.

UPDATE 2: I just discovered something. I don't know if it will help, but I'll mention it anyway.

I found that if i throw the offending element's visibility in an alert, it says "visible", but the element is definitely not visible on the page.

I also found that the behavior is the same in Firefox.

Its starting to look like its always the 21st element, so "when21". scratch that. Its only on elements that end in 0 that work. so like when40 and when30 show up, but not when31 or when25.

Try to look at the case, and possibly duplicated ID in your HTML document.

beside, you can have some issues due to the use of visibility in some case. Try to do some test with display: none instead visibility: hidden.

For display again the element, you can use display: block, display: inline, or the other possibility of display, depending of the element you manipulate.

Ok, here's what I came up with.

All I did was change the name of the when + x drop down to when1 + x.

So:

 if(howoften != 8 && howoften != 9)
    {
        document.getElementById("first"+x).style.visibility = "visible";
        document.getElementById("when1"+x).style.visibility = "visible";
    }
    else
    {
        document.getElementById("when1"+x).style.visibility = "hidden";
        document.getElementById("first"+x).style.visibility = "hidden";
    }

... etc...

and

<select name="when1<cfoutput>#Peoplecount#</cfoutput>"  style="visibility:hidden" size="1" id="when1<cfoutput>#Peoplecount#</cfoutput>">
    <option value="">Select A Time</option>
    <cfloop query="thetimes">
         <option value="<cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput>"><cfoutput>#TimeFormat(thetimes.hourlytimes,'h:mm tt')#</cfoutput></option>
    </cfloop>
</select>

For some reason I don't understand, everything works just fine now. I had even tried just changing when to something like j_thing and it still didn't work. It was only when it had the '1' in there did it work.

If someone can explain why this works, I'd be thankful.