修改隐藏元素类名触发Cannot read attribute of null using array异常求助

嘿，我一眼就揪出问题所在啦！你遇到的null异常根源非常明确——你的id数组里多了不必要的单引号！

看你定义的id数组：

var id = ["'demo'", "'drill'", "'alert'"];

这里每个id值都被额外包裹了一层单引号，比如'demo'，但实际你的元素id应该是demo（没有外层单引号）。当你调用document.getElementById(id[i])时，相当于在查找id为'demo'（带单引号）的元素，自然找不到匹配项，就会返回null，进而触发alert和后续的异常。

修复后的代码 #

把数组里的单引号去掉就可以正常运行了，我还顺便优化了DOM查询的性能（避免重复调用getElementById）：

function changeMenu(code) { 
  var i, id = ["demo", "drill", "alert"]; 
  for (i = 0; i <= 2; i += 1) { 
    const targetElement = document.getElementById(id[i]);
    if (targetElement !== null) { 
      if (i !== code) { 
        targetElement.setAttribute('class', 'row hidden'); 
      } else { 
        targetElement.setAttribute('class', 'row'); 
      } 
    } else {
      window.alert("error");
    } 
  } 
}

额外小建议 #

如果你是用类名控制显示隐藏，其实用classList会更灵活，能避免直接覆盖整个class属性导致误删其他类：

// 隐藏元素
targetElement.classList.add('hidden');
// 显示元素
targetElement.classList.remove('hidden');

这样只针对hidden类做增删操作，保留row类不用重复设置，代码更健壮。

内容的提问来源于stack exchange，提问作者UbadahJ