javascript - getElementsByName 不工作

Question

查找了这个问题的几个“答案”，但大多数只是人们没有将 getElementsByName() 返回的结果视为 NodeList!

编辑:我试图根据被点击的元素隐藏/显示元素。我可以使用 document.getElementById 对此进行硬编码，每次我有一个要隐藏/显示的元素时只需添加一个。但如果我可以检索所有命名为某物的元素并在它们上运行一个循环来隐藏/显示，那将是理想的。然后我可以在编写时用名称标记一个元素，这个循环将无需更改即可工作。在我的代码下方，只是尝试弹出一个带有用于测试目的的值的警报。至于现在，它始终会因空错误而中断。我正在使用和设计 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

Answer 1

给你...似乎:

1. onclick="javascript: <--- 不需要 - 只需引用函数名称
2. ShowContentEngineering需要在窗口上下文中设置
3. 您正在引用不允许值属性 (h5) 的元素的“值”属性

我让它工作而不是抓取 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>

这是一个工作 fiddle :https://jsfiddle.net/mu970a8k/