.getElementById IE答案

【问题标题】：.getElementById IE.getElementById IE
【发布时间】：2010-10-08 21:40:39
【问题描述】：

我有一个运行 2 个 ".getElementById('').style" 更改的 JavaScript。两者都在 FF 中完美运行，但第一个在 IE7 中不起作用。

感谢所有帮助:)

第一个源代码：

function ingen() {
    document.getElementById('merInfo1').style.display='none';
    document.getElementById('merInfo2').style.display='none';
    document.getElementById('merInfo3').style.display='none';
    document.getElementById('merInfo4').style.display='none';
    document.getElementById('merInfo5').style.display='none';
    document.getElementById('merInfo6').style.display='none';
    document.getElementById('merInfo7').style.display='none';
}

HTML：

<span class="enkeltSkjema" id="avtaleInput">
    <select name="radio1" id="radio1">
        <option value="1" onClick="ingen()">lorem</option>
        <option value="2" onClick="some()">lorem</option>                                  
        <option value="3" onClick="other()">lorem</option>
        <option value="4" onClick="func()">lorem</option>
        <option value="5" onClick="tion()">lorem</option>
        <option value="6" onClick="names()">lorem</option>
        <option value="7" onClick="goes()">lorem</option>
        <option value="8" onClick="here()">lorem</option>
    </select>
</span>                          
<span class="enkeltSkjema" id="merInfo">
    <span id="merInfo1" name="merInfo1"></span>
    <span id="merInfo2" name="merInfo2"></span>
    <span id="merInfo3" name="merInfo3"></span>
    <span id="merInfo4" name="merInfo4"></span>
    <span id="merInfo5" name="merInfo5"></span>
    <span id="merInfo6" name="merInfo6"></span>
    <span id="merInfo7" name="merInfo7"></span>
</span>

其次，在 IE 中运行良好：

function levAdresse() {
    if (document.getElementById('egenLevAdr').checked == true) {
        document.getElementById('levAdrBox').style.display='block';
    }   
    else {
        document.getElementById('levAdrBox').style.display='none';
    }
}

HTML：

<div id="levAdrBox">
    <div id="levAdr">Field
        <span class="" id="levAdrInput"><input type="text" id="text12" name="text12" /></span>
    </div>
    <div class="" id="levPostSted"> field:*
        <span class="" id="levPostStedInput">
            <input type="text" id="text18" name="text18" />
            <span class="" id="levPostNr">field:*
                <span class="" id="levPostNrInput">
                    <input type="text" id="text17" name="text17" />
                </span>
            </span>
        </span>
    </div>
</div>

【问题讨论】：

标签： javascript internet-explorer dhtml getelementbyid

【解决方案1】：

Uhhmmm...也许如果您在 SELECT 上使用“OnChange()”而不是在 OPTION 上使用“OnClick”？

<select name="radio1" id="radio1" onChange="ingen(this.value)">
        <option value="1">lorem</option>
        <option value="2">lorem</option>                                  
        <option value="3">lorem</option>
        <option value="4">lorem</option>
        <option value="5">lorem</option>
        <option value="6">lorem</option>
        <option value="7">lorem</option>
        <option value="8">lorem</option>
</select>

并在 ingen(something) 中做一个条件，或者调用与传递的值相关的其他函数...？

【讨论】：

正确，onclick 在选项上不是跨浏览器兼容的。 w3schools.com/htmldom/event_onclick.asp
doh，真不敢相信我在代码示例中错过了这一点！是的，在 IE 中单击某个选项会失败。（就像 IE 中的选项上的几乎所有事件一样）

【解决方案2】：

你有没有可能在 DOM 完全构建之前调用 ingen() 函数？

【讨论】：

我不这么认为，因为它是由用户输入触发的。无论如何要检查这个？

【解决方案3】：

您在页面上的其他任何地方是否有任何其他元素的“名称”属性设置为：

merInfo1
merInfo2
merInfo3
merInfo4
merInfo5
merInfo6
merInfo7

（在任何情况下也是如此：例如 MerInfo1、merinfo1、MERinfo1 在 IE 中都是一样的）

如果是这样，那就是错误。 IE 认为 name 与 ID 相同（这显然是一个错误）

【讨论】：

是的，阅读一下。 IE 有一些小问题。已经检查了脚本，没有。添加了一个同名的 name 属性，以防万一；）对 FF 没有任何影响。

【解决方案4】：

如果您有选择/可能，我会使用 jQuery 并摆脱（大部分）跨浏览器不兼容性：

function ingen() {
  $("#merInfo span").css("display", "none");
}

$(document).ready(function() {
  $("#egenLevAdr").click(function() { $("#levAdrBox").toggle(); });
});

【讨论】：

感谢您的提示！ Jquery 需要某种脚本调用吗？
再次感谢。去看看这个替代方案。
现在检查了，但遗憾的是 IE 是文盲。和往常一样，在 FF 中工作得很好。再次感谢，不错的代码。