用於在按鈕單擊時顯示/隱藏div內容的Javascript函數不起作用

Question

Javascript新手在這里。 這基本上就是我正在使用的。

下面的函數旨在隱藏newsDisplay類中包含的所有內容，但是在單擊調用它的按鈕時沒有任何反應。

 function showHide() { var x = document.getElementsByClassName('newsDisplay'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } 

 .newsDisplay { display: block; } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

手動更改display: block; display: none; 行為完全符合預期，因此該函數的語法或邏輯不正確，或者某些原因阻止了單擊按鈕時該函數的執行。

真的可以使用一些幫助，謝謝！

Answer 1

嘗試按如下方式嘗試此類的第一個元素

    var x = document.getElementsByClassName('newsDisplay')[0];

文檔document.single getElementsByClassName()將返回具有相同類的元素數組。 它與document.getElementById()不同之處在於后者返回的是DOM對象而不是DOM對象數組。

Answer 2

如其名稱getElementsByClassName所述，它獲取元素 （而不是單個元素），因此此函數調用的結果是元素的集合 。

要訪問集合的第一個元素，您可以：

x = document.getElementsByClassName('newsDisplay')[0];
// or 
X = document.getElementsByClassName('newsDisplay').item(0);

Answer 3

如果您想要頁面的多個頁面，可以嘗試循環。 關鍵是您要在類中獲取元素列表，因為類不是唯一的標識符。 您可以在下面使用我的代碼，也可以將其切換為ID，然后通過document.getElementById進行獲取。 注意s在document.getElement 小號 ByClassName

 var x = document.getElementsByClassName('newsDisplay'); function showHide() { for (var i = 0; i < x.length; i++){ x[i].style.display === 'none' ? x[i].style.display = 'block' : x[i].style.display = 'none'; } } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

Answer 4

試試下面的代碼。

用這個

var x = document.getElementsByClassName('newsDisplay')[0];

  function showHide() { var x = document.getElementsByClassName('newsDisplay')[0]; if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } 

 .newsDisplay { display: block; } 

 <h1>News<button onclick="showHide();"><img src="..\\Images\\showHide.png"></button></h1> <div class="newsDisplay"> <div class="bodyBox"> <h2>Diablo 3</h2> TEXT/PARAGRAPHS </div> </div> 

Answer 5

如果您按F12鍵，請導航到“源”選項卡（在Google chrome上），您可以在javascript函數上設置斷點，代碼正在運行，但是

Uncaught TypeError: Cannot read property 'display' of undefined

原因是getElementsByClassName返回具有該類選擇器的元素列表，而不僅僅是一個。 如果您只想對第一個元素執行此操作，則只需執行以下操作：

function showHide() {
    var x = document.getElementsByClassName('newsDisplay')[0];
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}