时间戳

首页 > 解决方案 > 如何在按钮单击时更改 div 的文本内容？香草 JS/Jquery

javascript - 如何在按钮单击时更改 div 的文本内容？香草 JS/Jquery

问题描述

 <div class="placeholder">
   <h3>Select</h3>
 </div>

 <div class="buttons">
   <button data-filter="*">Show all</button>
   <button data-filter=".stadia">Stadia</button>
   <button data-filter=".leisure">Leisure</button>
   <button data-filter=".heritage">Listed Heritage</button>
   <button data-filter=".residential">Residential</button>
   <button data-filter=".retail">Retail</button>
   <button data-filter=".healthcare">Healthcare</button>
   <button data-filter=".commercial">Commercial</button>
   <button data-filter=".facilities">Facilities Management</button>
   <button data-filter=".education">Education</button>
 </div>

你好！

我希望 .placeholder h3 （“选择”）中的文本在单击“显示全部”等时更改为所选按钮中的文本

我对 Javascript 不太熟悉，所以我什至不知道从哪里开始。我知道使用输入字段会更容易，但这与另一个我真的无法更改的功能相关联。

编辑：尤金斯的回答解决了这个问题，我在 HTML 中要做的就是向 h3 添加一个“文本输出”类。再次感谢！

标签： javascript

解决方案

这就是你想要的

工作示例：https ://jsfiddle.net/qt7cpaxd/

JS

buttonArray = document.querySelectorAll('button');
for (let i = 0; i < buttonArray.length; i++) {

  buttonArray[i].addEventListener('click', (e) => {
    document.querySelector('.text-output').innerText = e.target.innerText;

  })

}

HTML

<div class="placeholder">
  <h3 class="text-output">Select</h3>
</div>

<div class="buttons">
  <button data-filter="*">Show all</button>
  <button data-filter=".stadia">Stadia</button>
  <button data-filter=".leisure">Leisure</button>
  <button data-filter=".heritage">Listed Heritage</button>
  <button data-filter=".residential">Residential</button>
  <button data-filter=".retail">Retail</button>
  <button data-filter=".healthcare">Healthcare</button>
  <button data-filter=".commercial">Commercial</button>
  <button data-filter=".facilities">Facilities Management</button>
  <button data-filter=".education">Education</button>
</div>

推荐阅读