Javascript 为什么innerHTML返回“0”；“未定义”；当与节点列表一起使用但与单个对象一起使用时？

我想在单击按钮时显示带有按钮名称的警报。 如果我将

this.innerHTML

更改为

leButtons.innerHTML

返回“未定义”。但是，当我用一个按钮（注释中的代码）尝试同样的方法时，它是有效的

var-leButtons=document.getElementsByTagName（'button'）；
对于（变量i=0；i

文件
蓝色
红色
粉红色
绿色

leButtons

是一个HTML元素数组，这意味着它没有属性

innerHTML

。您需要使用

leButtons[i].innerHTML

来获取您当前在for循环中的按钮的

innerHTML

属性

var leButtons = document.getElementsByTagName('button');

for (var i = 0; i < leButtons.length; i++){
   leButtons[i].onclick = function(){    returnColor(leButtons[i].innerHTML)     };
}

function returnColor (xxx) {
   alert (xxx);
}

var-leButtons=document.getElementsByTagName（'button'）；
对于（变量i=0；i
@person的想法是正确的，但他有一个错误，那就是leButtons不是数组，而是节点列表。节点列表没有数组具有的内置方法。通过使用spread操作符，您可以将其转换为数组。从功能上讲，它们是相同的，但是使用map会更简洁

var leButtons = [...document.getElementsByTagName('button')];

leButtons.map(button => (button.onclick = () => alert(button.innerHTML)));

您希望元素列表返回什么？
leButtons
是一个节点列表，而不是单个元素！为什么列表会有内部HTML？列表包含元素，在列表中包含单个元素的属性是不符合逻辑的。它将与
leButtons[i].innerHTML
一起工作，但前提是将
var i
更改为
let i
，否则
i
将在该部分运行时（因为它在每次循环迭代中都会被修改）有一个意外值，而不是数组。这是一个实时HTMLCollection。您的代码将无法工作。您引入了臭名昭著的for循环错误。“i”是什么？
getElementsByTagName
返回一个
HTMLCollection
querySelectorAll
返回一个
NodeList
NodeList
将支持
forEach
而无需扩展（IE除外）。这里的
Array#map
没有实际用途。