JS报错 Cannot set property 'display' of undefined问题

原文参考链接：https://blog.csdn.net/qq_42583562/article/details/86598245

先说结论 

document.getElementsByClassName("judge");  获得的是数组

先贴上js代码

function judgeAll(){
var cancel = document.getElementById("cancel");
var judge = document.getElementsByClassName("judge");
cancel.onclick = function(){
if (judge.style.display=="") {
judge.style.display = "block";
cancel.value = "取消";
}else{
judge.style.display = "";
cancel.value = "编辑";
}
}
}

先获取按钮的id名和下拉框的class名，然后进行判定，如果下拉框judge被隐藏了，就display：block；如果下拉框judge没被隐藏，就display：none。很简单的想法，但是出错了。

错误信息

"Cannot set property 'display' of undefined"

开始还以为我愈发写错了，检查后发现没有，然后上网查了原因，才发现原因在class名judge这里。

"judge.style.display=='none';"

class类不能简单直接拿来判断，因为具有多个class，所以要加上数组才能判断。

改进代码如下：

function judgeAll(){
var cancel = document.getElementById("cancel");
var judge = document.getElementsByClassName("judge");
cancel.onclick = function(){
if (judge[0].style.display == '' ) {
for(var i=0;i<judge.length;i++){
judge[i].style.display = "block";
cancel.value = "取消";
}
}else if(judge[0].style.display == 'block'){
for(var i=0;i<judge.length;i++){
judge[i].style.display = "";
cancel.value = "编辑";
}
}
}
}