Javascript 无法在具有函数的数组中以JS生成的按钮为目标，获取；无法读取属性'；setAttribute'；“无效”的定义；错误

我只是试图在单击某个特定按钮时改变其背景。 我通过for循环生成了100个按钮（希望以后能制作一个简单的游戏）作为数组，同时分配了一个id和一个不同的函数调用（基于循环的递增“I”值），并且无法在单击时实际改变背景，而是得到了下面的错误 “未捕获的TypeError:无法读取null的属性'setAttribute' 在showOptions（brain.js:31） 在HTMLButtonElement.onclick上（index.html:15）”

我的代码如下

var btn=[]；
函数生成器板（）{
对于（i=0；i<100；i++）{
var模=i%10；
向上，向左；
btn[i]=document.createElement（“按钮”）；
var元素=document.getElementById（“主体”）；
//btn[i].innerText=“单击我”；
元素。追加子元素（btn[i]）；
btn[i].style.backgroundColor=“白色”；
btn[i].id=i；
btn[i].style.width=“50px”；
btn[i].style.height=“40px”；
btn[i].style.position=“绝对”；
btn[i].style.top=模*100；
btn[i].style.left=数学楼层（i/10）*100；
btn[i].x=（i+10）%10；
btn[i].y=数学楼层（i/10）；
文件
.getElementById（btn[i].id）
.setAttribute（“onclick”、“showOptions（i）”）；
btn[i].innerText=btn[i].id；
console.log(
btn[i].id+
" " +
btn[i].style.left+
" " +
btn[i].style.top+
" " +
btn[i].x+
" " +
btn[i].y
);
}
}
生成板（）；
功能显示选项（一）{
document.getElementById（i）.setAttribute（“样式”，“背景色：红色；”；//这是第31行
}

奇怪的是，在console.log中，我实际上得到了正确的数字btn[I].id

错误的（index.html:15）行很简单

---

您的代码存在多个问题。
您应该使用返回数组的

getElementsByTagName

获取

body

元素。所以选择第一个元素。
设置onclick属性应该使用

i

的值，而不是text

i

var btn = [];

function generateBoard() {
  for (i = 0; i < 100; i++) {
    var modulo = i % 10;
    var up, forLeft;
    btn[i] = document.createElement("BUTTON");
    var element = document.getElementsByTagName("body")[0];
    //btn[i].innerText = "CLICK ME"; 
    element.appendChild(btn[i]);
    btn[i].style.backgroundColor = "white";
    btn[i].id = i;
    btn[i].style.width = "50px";
    btn[i].style.height = "40px";
    btn[i].style.position = "absolute";
    btn[i].style.top = modulo * 100;
    btn[i].style.left = Math.floor(i / 10) * 100;
    btn[i].x = (i + 10) % 10;
    btn[i].y = Math.floor(i / 10);
    
    document.getElementById(btn[i].id).setAttribute('onclick', 'showOptions(' + i + ')');
    btn[i].innerText = btn[i].id;


    console.log(btn[i].id + " " + btn[i].style.left + " " + btn[i].style.top + " " + btn[i].x + " " + btn[i].y);

  }
}
generateBoard();

function showOptions(i) {

  document.getElementById(i).setAttribute("style", "background-color: red;"); //this is line 31
}

var btn=[]；
函数生成器板（）{
对于（i=0；i<100；i++）{
var模=i%10；
向上，向左；
btn[i]=document.createElement（“按钮”）；
var元素=document.getElementsByTagName（“正文”）[0]；
//btn[i].innerText=“单击我”；
元素。追加子元素（btn[i]）；
btn[i].style.backgroundColor=“白色”；
btn[i].id=i；
btn[i].style.width=“50px”；
btn[i].style.height=“40px”；
btn[i].style.position=“绝对”；
btn[i].style.top=模*100；
btn[i].style.left=数学楼层（i/10）*100；
btn[i].x=（i+10）%10；
btn[i].y=数学楼层（i/10）；
document.getElementById（btn[i].id）.setAttribute（'onclick'，'showOptions（'+i+'））；
btn[i].innerText=btn[i].id；
console.log（btn[i].id+“”+btn[i].style.left+“”+btn[i].style.top+“”+btn[i].x+“”+btn[i].y）；
}
}
生成板（）；
功能显示选项（一）{
document.getElementById（i）.setAttribute（“样式”，“背景色：红色；”；//这是第31行
}

我重新编写了您的代码，修复了一些问题。我假设您有一个id为

body

的元素，它与

body

元素不同，后者可以通过

document.body

访问

var buttons = [];

function generateBoard(){
    for(i = 0; i < 100; i++) {
        var modulo = i % 10;
        buttons[i] = document.createElement("BUTTON");
        document.getElementById("body").appendChild(buttons[i]);
        //buttons[i].innerText = "CLICK ME";
        buttons[i].style.backgroundColor = "white";
        buttons[i].id = i;
        buttons[i].style.width = "50px";
        buttons[i].style.height = "40px";
        buttons[i].style.position = "absolute";
        buttons[i].style.top = modulo * 100;
        buttons[i].style.left = Math.floor(i / 10) * 100;
        buttons[i].x = (i + 10) % 10;
        buttons[i].y = Math.floor(i / 10);
        buttons[i].addEventListener('click', function(event) {
            // This code is run when the button is clicked
            // Note I am passing the element, rather than an id
            showOptions(this);
        });
        buttons[i].innerText = i;

        console.log(buttons[i].id + " " + buttons[i].style.left + " " + buttons[i].style.top + " " + buttons[i].x + " " + buttons[i].y);
    }
}
generateBoard();
function showOptions(button){
    button.style.backgroundColor = "red";
}

var按钮=[]；
函数生成器板（）{
对于（i=0；i<100；i++）{
var模=i%10；
按钮[i]=document.createElement（“按钮”）；
document.getElementById（“body”）.appendChild（按钮[i]）；
//按钮[i]。innerText=“单击我”；
按钮[i].style.backgroundColor=“白色”；
按钮[i].id=i；
按钮[i].style.width=“50px”；
按钮[i].style.height=“40px”；
按钮[i].style.position=“绝对”；
按钮[i].style.top=模*100；
按钮[i].style.left=Math.floor（i/10）*100；
按钮[i].x=（i+10）%10；
按钮[i].y=Math.floor（i/10）；
按钮[i]。addEventListener（'click'，函数（事件）{
//此代码在单击按钮时运行
//注意，我传递的是元素，而不是id
showOptions（这个）；
});
按钮[i]。innerText=i；
console.log（按钮[i].id+“”+按钮[i].style.left+“”+按钮[i].style.top+“”+按钮[i].x+“”+按钮[i].y）；
}
}
生成板（）；
功能显示选项（按钮）{
button.style.backgroundColor=“红色”；
}

您可以通过引用

事件本身的属性来定位单击的元素，而不是分配并尝试使用ID属性。如果要分析
事件
（使用console），您会注意到几个属性--
目标
允许访问元素本身，这有助于简化
显示选项
功能。在本例中，您还可以简单地使用
this
从
showOptions
中引用按钮本身，这将使其更加简单-例如
this.style.backgroundColor='red'


让bttns=[]；
const generateBoard=函数（s=100）{
常量showOptions=函数（e）{
e、 target.style.backgroundColor='red'；
};
for（设i=0；i