Question

 <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不太熟悉，所以我什至不知道从哪里开始。我知道使用输入字段会更容易，但这与另一个函数绑定在一起，老实说我没有能力进行更改。

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

Answer 1

这就是你想要的

工作示例：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>

Answer 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')">

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

2 个答案: