单击按钮时显示/隐藏 div 内容的 Javascript 函数不起作用

Question

这里是 JavaScript 新手。 This is basically what I'm working with.

下面的函数旨在隐藏 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 document.single getElementsByClassName() 将返回具有相同类的元素数组。它与 document.getElementById() 的不同之处在于后者返回 DOM 对象而不是 DOM 对象数组。