Javascript 元素数组 innerHTML 返回未定义
[英]Javascript element array innerHTML returning undefined
问题描述
So I am trying to simply display the numbers/signs written within each 'num' div.
所以我试图简单地显示写在每个“num”div 中的数字/符号。 Which should be reachable through innerHTML correct?哪个应该可以通过正确的 innerHTML 访问？ so I have a for loop through all my 'num' divs, with a click listener, though the clicks are returning undefined, instead of each element's innerHTML.所以我有一个 for 循环遍历我所有的 'num' div，并带有一个点击侦听器，尽管点击返回未定义，而不是每个元素的 innerHTML。
I have also tried (this.innerHTML instead of number[i].innerHTML within the event listener in the loop).我也尝试过（this.innerHTML 而不是循环中事件侦听器中的 number[i].innerHTML）。 to no avail.无济于事。
I must be missing something, please help.我一定错过了什么，请帮忙。
const screen = document.querySelector('.screen') const number = document.querySelectorAll('.num') const opr = document.querySelector('.opr') const clr = document.querySelector('.clr') for (i = 0; i < number.length; i++) { number[i].addEventListener('click', (e) => { screen.innerHTML += number.innerHTML console.log(number[i].innerHTML) console.log('clicked') }) }
<head> <link rel="stylesheet" type="text/css" href="src/style.css"> <title> File Title </title> <meta charset="UTF-8"> </head> <body> <div class="calculator"> <div class="screen"> </div> <div class="inputs"> <button class="opr add">+</button> <button class="opr sub">-</button> <button class="opr div">/</button> <button class="opr mult">*</button> <button class="num">1</button> <button class="num">2</button> <button class="num">3</button> <button class="num">4</button> <button class="num">5</button> <button class="num">6</button> <button class="num">7</button> <button class="num">8</button> <button class="num">9</button> <button class="num">0</button> <button class="opr dot">.</button> <button class="opr eql">=</button> <button class="clr">C</button> </div> </div> <script src="src/script.js"></script> </body>
3 个解决方案
解决方案1
1 已采纳 2021-02-22 02:51:24
simply do简单地做
const
screen = document.querySelector('.screen')
, number = document.querySelectorAll('.num')
, opr = document.querySelector('.opr')
, clr = document.querySelector('.clr')
number.forEach(nElm => nElm.onclick = e => screen.textContent += nElm.textContent )
or use event delegation或使用事件委托
const screen = document.querySelector('#screen'), buttons = document.querySelector('#inputs') buttons.onclick = ({target}) => { if (.target.matches('button[data-op]')) return switch (target.dataset:op) { case 'num'. screen.textContent += target.textContent;trim() break: case 'calc'. screen.textContent += target;textContent break: case 'clr'. screen;textContent = '' break: case 'eql'. screen.textContent = eval(screen;textContent) break; } }
#screen { display: block; width: 200px; height: 20px; padding: 10px; background-color: aquamarine; text-align: right; }
<div id="calculator"> <div id="screen"> </div> <div id="inputs"> <button data-op="calc" > + </button> <button data-op="calc" > - </button> <button data-op="calc" > / </button> <button data-op="calc" > * </button> <br> <button data-op="num" > 1 </button> <button data-op="num" > 2 </button> <button data-op="num" > 3 </button> <button data-op="num" > 4 </button> <br> <button data-op="num" > 5 </button> <button data-op="num" > 6 </button> <button data-op="num" > 7 </button> <button data-op="num" > 8 </button> <br> <button data-op="num" > 9 </button> <button data-op="num" > 0 </button> <button data-op="num" >. </button> <br> <button data-op="eql" > = </button> <button data-op="clr" > C </button> </div> </div>
解决方案2
0 2021-02-22 02:49:01
I think it will be easier to add id to your buttons and then use "e.target.id" to get the element id and after that the innerhtml我认为将 id 添加到按钮会更容易，然后使用“e.target.id”获取元素 id，然后使用 innerhtml
解决方案3
0 2021-02-22 02:51:36
You forget to use number[i] when concat screen innerHTML:连接屏幕 innerHTML 时忘记使用number[i] ：
screen.innerHTML += number.innerHTML;
// correct:
screen.innerHTML += number[i].innerHTML;
And you can use event to get target:您可以使用事件来获取目标：
screen.innerHTML += e.target.innerHTML;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.