Question

当用户点击按钮时需要显示div。

// HTML代码

      <div class="col-md-4">
          <h4 class="service-heading">Sociala Medier</h4>
          <p class="text-muted">first line of text.</p>
            <div class="info-text" style="display:none">
              <p class="text-muted">Second line of text.</p>
            </div>
          <button class="info-button"><span>Läs mer </span></button>
        </div>

// JS-代码

document.getElementByClassName("info-button").addEventListener("click", function(){
   document.getElementByClassName('info-text').style.display = "block";
});

有什么建议我可以让它工作吗？也用onclick进行了测试，但是也没有。

Answer 1

您正在将元素类传递给.getElementById函数。
简而言之，您可以将HTML更改为：

<div class="col-md-4">
  <h4 class="service-heading">Sociala Medier</h4>
  <p class="text-muted">first line of text.</p>
  <div id="info-text" style="display:none">
    <p class="text-muted">Second line of text.</p>
  </div>
  <button id="info-button"><span>Läs mer </span></button>
</div>

它会起作用

Answer 2

实际上，“getElementsByClassName”您错过了s并且它获得了一个集合，因此您需要具体说明您要定位的是哪一个。鉴于您的代码，您需要第一个/唯一元素

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

https://jsfiddle.net/cbye0ph9/

document.getElementsByClassName("info-button")[0].addEventListener("click", function(){
   document.getElementsByClassName('info-text')[0].style.display = "block";
});

按钮上的事件清单显示div

2 个答案: