getElementsByName不起作用

Question

getElementsByName不起作用

3

查阅了几个关于这个问题的“答案”，但大多数人都没有将getElementsByName()返回的结果视为NodeList！

编辑：我正试图根据单击元素来隐藏/显示元素。我可以使用document.getElementById进行硬编码，并在每次需要隐藏/显示元素时添加一个。但是，如果我可以检索所有命名为某些内容的元素并对它们运行循环以隐藏/显示，那么就会更理想。然后，当编写时，只需标记一个元素名称，此循环就可以无需修改地工作。在下面的代码中，我的代码只是为了测试目的而尝试使用弹出窗口显示值。目前，它始终会因为null错误而中断。我正在使用并设计用于Internet Explorer 9，因为这是公司使用的浏览器。

代码：

    <input type="radio" name="Area" value="Engineering" id="EngineeringCheck" onclick="javascript: ShowContentEngineering();" />Engineering

<script type="text/javascript">
    function ShowContentEngineering() {
        alert(document.getElementsByName('EngineeringAreas')[0].value)
        document.getElementById('InformationBlock').style.display = 'block';
}
</script>

<h5 name="EngineeringAreas" value="luls"> WHAT THE HECK </h5>

上面的代码报错，说getElementsByName('EngineeringAreas')[0]中的对象为空。显然，在它下面，它不是空的...我是否将getElementsByName('string')[0].value与元素值混淆了？还是检索到其他值？

理想情况下，我稍后会添加其他元素，并将它们标记为“EngineeringAreas”，从而永远不必处理隐藏/显示功能。

编辑：这是错误消息：

Unhandled exception at line 53, column 9 in http://localhost:57264/Home/Index

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'value': object is null or undefined

- Aserian

1

顺便提一下，应该使用 onclick="ShowContentEngineering(); 而不是 onclick="javascript: ShowContentEngineering();。 - j08691

1

你用的是哪个浏览器？我在 Mac 上试了 Firefox 41.0.1，结果如预期一样可以运行（会弹出“未定义”警告，但那是因为标题没有值。如果我两处都将“value”改成“id”，就会得到惊人的效果）。 - blm

2

警告框应该显示什么 - lols 还是什么鬼东西？ - Jon Kantner

你是真的在使用 getElementsByName('string')[0] 吗？还是只是为了注释而已？如果你在测试中真的使用了 getElementsByName('EngineeringAreas')[0]，那么IE浏览器和Firefox、Chrome以及Safari浏览器之间存在差异。但我没有IE浏览器可以尝试。 - blm

尝试使用正确的HTML，将元素包装在<body>元素中等。document.getElementsByName在许多浏览器中存在错误和不良支持的历史。我建议避免使用它，或者改用jQuery进行高级选择。 - Ultimater

显示剩余5条评论

2个回答

3

在 .getElementsByName('EngineeringAreas') 和 .value 之间插入 .attributes[1]。其中的数字 1 指的是名为 EngineeringAreas 的 <h5> 元素中第二个属性，也就是 value 属性。将 .value 放置在 .attributes[1] 后面应该会在警告框中返回 "luls" 的值文本。警告代码应设置如下：

alert(document.getElementsByName('EngineeringAreas')[0].attributes[1].value);

更多信息: http://www.w3schools.com/jsref/prop_attr_value.asp

（此链接为相关的IT技术内容，需要进一步查看）

- Jon Kantner

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven Moseley · Accepted Answer

在这里...似乎是：

onclick="javascript: <--- 不必要 - 只需引用函数名
ShowContentEngineering 需要在窗口上下文中设置
您正在引用不允许有值属性（h5）的元素的“value”属性

我改为抓取h5的innerHTML来使其工作。代码：

<input type="radio" name="Area" value="Engineering" id="EngineeringCheck" onclick="ShowContentEngineering();" />Engineering

<h5 name="EngineeringAreas"> WHAT THE HECK </h5>
<script>
    window.ShowContentEngineering = function() {
        alert(document.getElementsByName('EngineeringAreas')[0].innerHTML)
        document.getElementById('InformationBlock').style.display = 'block';
    }
</script>

这是一个可用的 JSFiddle 示例：https://jsfiddle.net/mu970a8k/