问题描述
我正在尝试使用标签“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。