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 = "編輯";
}
}
}
}