Question

这里的Javascript新手。 This is basically what I'm working with.

下面的函数用于隐藏newsDisplay类中包含的所有内容，但单击调用它的按钮时没有任何反应。

＆＃13;

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

＆＃13;

.newsDisplay {
    	display: block;
    }

＆＃13;

<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>

＆＃13;

手动将display: block;更改为display: none;的行为完全符合预期，因此函数的语法或逻辑不正确，或者在单击按钮时阻止函数执行。

真的可以使用一些帮助，谢谢！

Answer 1

尝试此类的第一个元素如下

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

文档document.single getElementsByClassName()将返回具有相同类的元素数组。它与document.getElementById()不同，因为后者返回DOM对象而不是DOM对象数组。

Answer 2

如其名称countexperience(experienced, fresh) NameError: name 'experienced' is not defined所述元素（而不是单个元素），因此此函数调用的结果是集合元素。

要访问集合的第一个元素，您可以：

getElementsByClassName

Answer 3

如果您想要多个页面，可以尝试循环。关键是你要抓住类的元素列表，因为类不是唯一标识符。您可以使用下面的代码或将其切换为id并通过document.getElementById获取它。请注意document.getElement s ByClassName

中的s

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，导航到来源标签（在谷歌浏览器上）你可以在你的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';
    }
}

用于显示/隐藏按钮点击不工作的div内容的Javascript函数

5 个答案: