返回未定义的Javascript元素数组innerHTML

因此，我试图简单地显示写入每个'num'div中的数字/符号。应该通过innerHTML访问哪些数字/符号？因此，我在所有'num'div中都有一个for循环，带有一个click侦听器，尽管单击返回的是未定义的，而不是每个元素的innerHTML

我也尝试过（this.innerHTML而不是循环中事件侦听器中的数字[I].innerHTML）。无济于事

我一定错过了什么，请帮忙

const screen=document.querySelector（“.screen”）
const number=document.querySelectorAll（'.num'）
const opr=document.querySelector（“.opr”）
const clr=document.querySelector（'.clr'）
对于（i=0；i{
screen.innerHTML+=number.innerHTML
console.log（编号[i].innerHTML）
console.log（'clicked'）
})
}

文件名
+
-
/
*
1.
2.
3.
4.
5.
6.
7.
8.
9
0
.
=
C

我认为将id添加到按钮中，然后使用“e.target.id”获取元素id会更容易，之后innerhtml只需这样做

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）

或者使用事件委托

const
screen=document.querySelector（“#screen”）
，buttons=document.querySelector（“#inputs”）
buttons.onclick=（{target}）=>
{
如果（！target.matches（'button[data op]'））返回
开关（target.dataset.op）
{
案例“num”：
screen.textContent+=target.textContent.trim（）
打破
案例“计算”：
screen.textContent+=target.textContent
打破
案例“clr”：
screen.textContent=“”
打破
案例“eql”：
screen.textContent=eval（screen.textContent）
打破
}
}

#屏幕{
显示：块；
宽度：200px；
高度：20px；
填充：10px；
背景颜色：海蓝宝石；
文本对齐：右对齐；
}

+ 
- 
/ 
*

1.
2.
3.
4

5.
6.
7.
8

9
0
.   

= 
C

当concat屏幕显示innerHTML:

screen.innerHTML += number.innerHTML;
// correct:
screen.innerHTML += number[i].innerHTML;

您可以使用事件获取目标：

screen.innerHTML += e.target.innerHTML;

---

不经意间：

document.querySelector（'.screen'）

可能需要是

document.querySelector（'.screen'）[0]

——querySelector可能返回数组。另外，将变量包装在

Number（）

——这些变量可能将数字作为字符串获取，并在

screen.innerHTML+=Number.innerHTML

@Coll

querySelector

中返回与选择器匹配的元素的第一次出现

querySelectorAll

返回一个

HTMLElementCollection

，它可以被索引。@HaoWu是的，谢谢。只是抬头看看，querySelector！我对丢失的CSS感到好奇。（这是一个使用事件委派的教科书案例）尝试使用

非常感谢，数据属性是实现这一点的最佳方式。我本以为innerHTML是可以访问的。我也尝试了使用ID，但它仍然返回未定义的。结果证明数据属性是有效的。虽然我想知道为什么innerHTML不能被检测到。