按钮上的事件监听器以显示 div答案

【问题标题】：Eventlistener on button to display div按钮上的事件监听器以显示 div
【发布时间】：2018-02-05 18:51:48
【问题描述】：

当用户点击按钮时需要显示一个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 进行了测试，但这也不起作用。

【问题讨论】：

<div class="info-text" 和 document.getElementById('info-text') 不匹配，与按钮 <button class="info-button"> 相同，这些是类，而不是 id
复制了旧版本，也尝试了 getElementByClassName 并且不起作用。更新了我的帖子。
你能试试吗：document.querySelector(".info-button") 这只有在该类只有一个元素时才有效
您的意思是developer.mozilla.org/en-US/docs/Web/API/Document/… getElementsByClassName 您错过了s。例如，检查我的答案

标签： javascript jquery html button

【解决方案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>

它会起作用的

【讨论】：

对不起，伙计们，我的问题复制了错误的版本。尝试使用 getElementsByClassName 但这也不起作用。

【解决方案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";
});

【讨论】：

感谢黄教！非常感谢您的帮助。