微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。