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

【问题标题】：How do I change a div's text content on button click? Vanilla JS/Jquery如何在按钮单击时更改 div 的文本内容？香草 JS/Jquery
【发布时间】：2019-09-15 15:29:31
【问题描述】：

 <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 添加一个“文本输出”类。再次感谢！

【问题讨论】：

stackoverflow.com/q/8550251/438992、stackoverflow.com/questions/12898475/…等文字替换，如何点击操作同样可搜索。
“我对 Javascript 不太熟悉，所以我什至不知道从哪里开始。” - 一个很好的起点是谷歌搜索“ JavaScript 教程”，或者，如果您想使用 jQuery，如标题所示，“jQuery 教程”。有很多资源可供您使用。 Stack Overflow 不寻求替代教程或提供辅导服务。一旦开始，如果您遇到错误或意外结果等问题，我们可以提供帮助。
不用担心，谢谢，我通常google，第一件事就是Stack Overflow，我并没有特别使用JS，但我认为那是因为我避免它！我会在网上找一些tuts！我需要关闭这个 Q 吗？

标签： javascript

【解决方案1】：

这就是你想要的

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

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>

【讨论】：

@John-LukeWard 现在做家庭作业，我建议你只针对 div 类按钮中的按钮，否则你会针对所有按钮而你不希望这样。
谢谢，我会试一试！
嗨@EugeneSunic，我在查询选择器中添加了一个类：buttonArray = document.querySelectorAll('.buttons button');
@John-LukeWard 好东西，也可以为 h3 html 元素放置一个 id 而不是类...

【解决方案2】：

不是这种懒惰的方式；）你需要给 div 一个 ID

      <div id="ibims" class="buttons">

     function change_ibims(id, src)
         var ibims=document.getElementById(id);
         if (ibims){ // check if the element is inside the dom
            ibims.innerHTML=src;
         } 
      }

现在您可以通过

之类的方式查找和更改此 div

     var id="ibims";
     var src="wahtever you want";
     change_ibims(id, src);

或

     <input type="button" caption="clickme" 
     onclick="javascript:change_ibims('ibims','Hello Hello')">

【讨论】：