随机HTML元素不受javascript的影响

Question

我对这个页面有一个相当奇怪的问题。页面本身非常难看，这可能对情况没有多大帮助。

在代码中，您将看到当从下拉列表中选择项目时，将调用javascript函数，该函数应根据选择的项目使某些隐藏项目可见。但是，当页面上有超过20条记录时，会随机跳过某些元素并保持隐藏状态。它很奇怪，因为似乎没有跳过哪些元素的模式。

这是javascript函数（第二个'if'是我认为问题所在的位置）：

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";

        }
   }  

有关为何跳过这些行的任何想法？

更新
我经历了一点点重新编写函数，因此它会更小，我仍然会得到相同的行为。

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.visibility = "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";
    }

它可能不是最好的方式，但它只需要几分钟。

至于HTML，它看起来很好，但我可能会遗漏一些东西。以下是相关要素：

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

我知道这很可怕，但这就是为什么我不想重做它。我有自己要做的事情，如果可以避免的话，我不想花很多时间重做别人的工作。

更新2： 我刚发现了一些东西。我不知道它是否会有所帮助，但无论如何我都会提到它。

我发现如果我在警告中抛出违规元素的可见性，它会显示“可见”，但该元素在页面上肯定不可见。

我还发现Firefox中的行为是相同的。

它开始看起来总是第21个元素，所以“when21”。 划伤那个。它仅适用于以0结尾的元素。因此，when40和when30会显示，但不会显示when31或when25。

Answer 1

尝试查看案例，并可能在HTML文档中复制ID。

旁边，由于在某些情况下使用visibility，您可能会遇到一些问题。尝试使用display: none代替visibility: hidden进行一些测试。

要再次显示元素，您可以使用display: block，display: inline或the other possibility of display，具体取决于您操作的元素。

Answer 2

好的，这就是我想出来的。

我所做的只是将when + x下拉菜单的名称更改为when1 + x。

所以：

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

和

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

由于某些原因我不明白，现在一切正常。我甚至尝试将when更改为类似j_thing的内容，但仍然无效。只有当它有“1”时，才有效。

如果有人能解释为什么会这样，我会很感激。