如何获取按钮的文本内容并显示出来？

编程问答 2022-06-01

问题描述

我正在尝试使用标签“number”创建一个循环并只显示其中的文本？

<button class="span-two" id="ac-color">AC</button>
<button id="clear-entry">CE</button>
<button id="divideOperator">÷</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button id="multiplyOperator">*</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button id="addOperator">+</button>
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button id="subtractOperator">-</button>
<button class="number">0</button>
<button class="number">.</button>
<button class="span-two" id="equals">=</button>

解决方法

请注意，在您的代码中，第一个选择器（属于“数字”类的按钮）分配的数组成员少于第二个选择器（您选择所有按钮的位置），但是在循环中您使用数字索引.

const btn = document.getElementsByTagName('button');
const inp = document.getElementById('output');
for (let i = 0; i < btn.length; ++i) {
  btn[i].addEventListener('click',() => {
  inp.innerText += btn[i].innerText;
});

添加到所有按钮的事件侦听器以及通过单击其中一个按钮来修改 id 为 'output' 的 div 的 innerText。

htmljavascript