javascript - 未捕获的类型错误 : Cannot read property 'innerHTML' of null when unchecking checkbox

Question

有一个函数 hideLabels 应该保存所选标签的当前值，然后在取消选中复选框时(选中一次后)返回它。控制台显示:“Uncaught TypeError:无法读取 null 的属性'innerHTML'”但我仍然看不到错误在哪里。

<script>

 function hideLabels(labelname) {

    var labelInitial=document.getElementById(labelname).innerHTML ;
    if (document.f.test.checked==true) {
        document.getElementById(labelname).innerHTML="";
    } else {
        document.getElementById(labelname).innerHTML=labelInitial;
    } };

function hideComments() {

    hideLabels(label_1) ;
    if (document.f.test.checked==true) {
        document.f.s.style.display="none";
    } else {
        document.f.s.style.display="inline";
    } };

</script>

<FORM name=f >

<label ID="label_1" for="s">Select please!</label>

<SELECT NAME=s>
    <OPTION>First Option</OPTION>
    <OPTION>Second Option</OPTION>
    <OPTION>Third Option</OPTION>
</SELECT>
<BR>

<INPUT name="test" TYPE=checkbox VALUE="test" onChange="hideComments()";>
<INPUT type=button value="Alert" onClick="alert(document.getElementById('label_1').innerHTML)";>

</FORM>

Answer 1

您必须在 hideLabels() 函数中用引号将参数括起来，因为该参数作为字符串传递。

更新:

我希望你只是想了解基础知识，因为我不明白你为什么不隐藏那个标签，就像 <select> 一样。元素。或者将它们都包装在一个 div 中，然后您可以切换该 div 的可见性。这使您的工作变得轻松。

但这就是你的工作方式，你应该在更改时获得初始 html，这样它才能工作。

这是DEMO以你的方式。

这就是我要做的，DEMO

<script>
    function hideComments() {
        var selectDiv = document.getElementById("toggleDiv");
        selectDiv.style.display = (selectDiv.style.display == "none") ? "block" : "none";
    };
</script>
<form name="f">
    <div id="toggleDiv">
        <label ID="label_1" for="s">Select please!</label>
        <select name="s">
            <option>First Option</option>
            <option>Second Option</option>
            <option>Third Option</option>
        </select>
    </div>
    <br/>
    <input name="test" type="checkbox" value="test" onchange="hideComments()" ;>
    <input type="button" value="Alert" onclick="alert(document.getElementById('label_1').innerHTML)" ;>
</form>