JavaScript getElementsByClassName錯誤

Question

我試圖做一個菜單，但是當我試圖在Chrome中執行代碼時，我得到了一個錯誤。

所以對於調試建議我做了一個按鈕：

<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" />

這是錯誤的功能是：

var loginshow = false; 


function login(c) 
{ 
    e = document.getElementsByClassName(c); 
    if(loginshow) 
    { 
     e.style.height = "0"; 
    } 
    else 
    { 
     e.style.height = "110px"; 
    } 
    loginshow=!loginshow; 

} 

從谷歌Chrome錯誤：

bar.js:13 Uncaught TypeError: Cannot set property 'height' of undefined 
    at login (bar.js:13) 
    at HTMLInputElement.onclick ((index):32) 

Answer 1

getElementsByClassName返回具有所有給定類名稱的所有子元素的類似數組的對象。您需要遍歷所有元素，並應用的樣式每一個

var loginshow = false; 
 

 

 
function login(c) { 
 
    let elements = document.getElementsByClassName(c); 
 
    for(let i=0,l=elements.length;i<l;i++){ 
 
    elements[i].style.height = loginshow ? "0" : "110px"; 
 
    } 
 
    loginshow = !loginshow; 
 

 
}

div { 
 
    background-color: tomato; 
 
    border: 1px solid black; 
 
}

<input type="button" style="position: fixed; left:0; bottom:0; width:50px; height:25px;" value="test" onclick="login('logf')" /> 
 

 
<div class="logf"></div> 
 
<div class="logf"></div>