Javascript 制作带有循环的按钮，并将其onclick功能设置为反转其背景色

我建议将函数委托给父元素：

function reserve(var i,var j){

        if (document.getElementById('i'+'j').style.bgColor == green){
            document.getElementById('i'+'j').style.bgColor = red;
        }
        else if (document.getElementById('i'+'j').style.bgColor == red){
            document.getElementById('i'+'j').style.bgColor == green;
        }


    }

请注意，不能保证

样式

对象中会保留

的“红色”或
的“绿色”颜色名称；并且可以设置/返回为十六进制，
rgba（）
或不太常见的
hsl（）
颜色值

请注意，在函数中，有几个错误：

function reserve(e){
// the 'e' argument is supplied automatically (though not in IE)
    // 'e.target' is the element that was clicked, we're storing a reference
    // to avoid having to look it up again
    var el = e.target;

    // checking that a 'button' element was clicked:
    if (el.tagName.toLowerCase() === 'button') {
        // setting the backgroundColor of the clicked element, using a conditional
        // operator ('ternary') format; if the backgroundColor is currently 'green'
        // it's then set to 'red', if it's *not* 'green' it's set to 'green':
        el.style.backgroundColor = el.style.backgroundColor === 'green' ? 'red' : 'green';
    }
}

// defining the event-handler of the 'div1' element, which calls the reserve
// function:
document.getElementById('div1').addEventListener('click', reserve);

在声明函数参数时不使用
var
。只要写下名字就可以了：
功能保留（i，j）

另外，在创建按钮时，您不希望触发
reserve
，而实际上，当您写入时会发生这种情况：
btn.onclick=reserve（i，j）

这将使用当前的
i
和
j
计算
reserve
，并在单击处理程序时分配
reserve
的返回值。只需写出不带括号的函数名：
btn.onclick=reserve

进一步

function reserve(var i,var j){
//               ^-- you can just declare i and j: reserve(i,v),
//                   without the var declaration
    if (document.getElementById('i'+'j').style.bgColor == green){
        //                       ^---^ gives the literal string 'ij',
        //                             whereas you want the sum of the numbers;
        //                             so don't quote them.
        document.getElementById('i'+'j').style.bgColor = red;
        //                                     ^-- you're looking for 
        //   style.backgroundColor
        //   the bgColor attribute is now 'legacy' (though not officially deprecated).
    }
    else if (document.getElementById('i'+'j').style.bgColor == red){
        document.getElementById('i'+'j').style.bgColor == green;
    }
}


}

最后，我将重写
reserve
，如下所示：

document.getElementById('div1').appendChild(document.createElement("br"));

event
是通过浏览器和
event传递给
onclick
处理程序的参数。target
将保存对单击元素的引用。（使用
console.log（event）
查看您可以考虑的其他信息）。

然后是
style.backgroundColor
，为了演示起见，我将
else if
设置为
else
，因为否则什么都不会发生（默认情况下我没有指定任何背景色）

编辑：啊，大卫比我快多了
 getElement（'i'+'j'）？你确定吗？你的
reserve
函数中所有错误的地方都有引号。。。另外，只需
btn.onclick=reserve
会起作用，因为你可以做
if（this.stuff）
-但是请注意，浏览器会将
绿色
值解释为
rgb（0128,0）
或类似值。我想我需要按钮的id，所以函数会反转按钮的颜色我单击我不想对数字求和，只需使用它们来获得Y，我想起来了：但这仍然是错的。此外，HTML5中允许使用数字
id
s，但它们仍然会在CSS和JavaScript中造成问题。无论如何，委托的功能应该可以工作，并且避免使用
id
。但是，如果我将我的“reserve”函数更改为您的“reserve”函数并添加脚本
document.getElementById（'div1'）。addEventListener（'click'，reserve'），您能否解释更详细的返工内容
单击时，我的div会改变颜色，我添加了一个检查（以确保单击了
按钮
元素，而不是
div
（或任何其他元素）element.im从CSS分配背景色，这会在我第一次单击它时产生问题change@Arch_interpreter您可能想注释掉我刚刚添加到
reserve
中的console.logs，您将看到first click style.backgroundColor为空，但通过
getComputedStyle
您将得到一个rgb（）值-因此您可能需要相应地更改if-else。我已经仔细研究了一下，得出了以下结论：然而，这在Chromium和FF中有效，但不同的浏览器可能会转换为“绿色”到不同的值=>除非使用例如hexadezimal值，否则不提供跨浏览器保证，但这同样取决于
窗口的返回值。getComputedStyle
…
document.getElementById('div1').innerHTML += '<br>';

document.getElementById('div1').appendChild(document.createElement("br"));

function reserve(event) {
    var clickedButton = event.target;
    //console.log(clickedButton.style.backgroundColor);
    //console.log(window.getComputedStyle(clickedButton).backgroundColor);
    if (clickedButton.style.backgroundColor == "green") {
        clickedButton.style.backgroundColor = "red";
    } else {
        clickedButton.style.backgroundColor = "green";
    }
}