如何将ID名称作为参数传入可见性切换函数并解决报错？

问题概述 #

你尝试将元素ID作为参数传入切换可见性的函数以复用代码，但修改后出现错误：
Uncaught TypeError: Cannot read properties of null (reading 'style')
中文翻译：未捕获的类型错误：无法读取null的属性（读取'style'）

你的错误实现代码：

<div onClick="toggleViz(item1)">Click this 1</div>
<div onClick="toggleViz(item2)">Click this 2</div>

<div id="item1" style="display: none;">
   <p>Item 1       
</div>

<div id="item2" style="display: none;">
   <p>Item 2       
</div>

<script>
function toggleViz(id_name) {
    var x = document.getElementById(id_name);
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

错误原因 #

调用toggleViz(item1)时，item1被当作变量解析，但页面中并没有定义名为item1的变量，导致函数接收到的参数是undefined。document.getElementById(undefined)会返回null，后续访问null.style自然触发报错。

正确解决方案 #

需要把ID作为字符串参数传入函数，调用时给ID添加单引号或双引号：

<div onClick="toggleViz('item1')">Click this 1</div>
<div onClick="toggleViz('item2')">Click this 2</div>

<div id="item1" style="display: none;">
   <p>Item 1       
</div>

<div id="item2" style="display: none;">
   <p>Item 2       
</div>

<script>
function toggleViz(id_name) {
    var x = document.getElementById(id_name);
    // 增加空值判断，避免ID不存在时报错
    if (!x) return;
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
</script>

额外优化建议 #

1. 使用CSS类控制显示隐藏（更灵活） #

定义CSS类：

.hidden { display: none; }

修改函数逻辑，通过切换类实现效果：

function toggleViz(id_name) {
    var x = document.getElementById(id_name);
    if (!x) return;
    x.classList.toggle('hidden');
}

2. 利用jQuery简化代码（已引入jQuery的情况下） #

<div onClick="toggleViz('item1')">Click this 1</div>
<div onClick="toggleViz('item2')">Click this 2</div>

<div id="item1" class="hidden">
   <p>Item 1       
</div>

<div id="item2" class="hidden">
   <p>Item 2       
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function toggleViz(id_name) {
    $('#' + id_name).toggle();
}
</script>

内容的提问来源于stack exchange，提问作者Glenn Thomas Davis