使按钮与循环和设置他们的onclick功能反转他们的背景颜色

make buttons with loop and set their onclick function reverse their background colors

本文关键字：他们的 功能 背景 颜色 onclick 循环 设置 按钮      更新时间：2023-09-26
function beggining1(){
        for (var i=1;i<4;i++){
            for (var j=1;j<4;j++){
                var btn = document.createElement("BUTTON");
                btn.className = "button1";
                btn.id = i +""+ j;
                btn.onclick = reserve(i,j);             
                var t = document.createTextNode(i+"_"+j);
                btn.appendChild(t);             
                document.getElementById("div1").appendChild(btn);
            }
            document.getElementById('div1').innerHTML += '<br>';
        }
    }

Ok，所以这个函数使按钮3x3方形(3行3列)，但现在我想调用一个函数，当他们被点击。我试过这样的东西，但它不起作用。所以我希望每次点击按钮时它的颜色从红色变为绿色/从绿色变为红色

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;
        }

    }

我建议把这个函数委托给父元素:

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);

请注意，不能保证'red'或'green'的颜色名称将保留在style对象中;并且可以设置/返回为十六进制，rgba()或较不常见的hsl()颜色值。

注意，在你的函数中，你有一些错误:

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;
    }
}

}

在声明函数参数时不使用var。只要写上名字就行了。function reserve(i, j) .

你也不想在创建按钮时触发reserve，这实际上会发生在你写:btn.onclick = reserve(i,j);
这将用当前的i和j计算reserve，并将resverve的返回值赋值为单击处理程序。只写函数名，不带括号:btn.onclick = reserve

进一步

document.getElementById('div1').innerHTML += '<br>';

似乎覆盖了已经分配的事件处理程序。阅读:点击按钮不会导致reserved被调用。我假设+=将一些浏览器(在我的情况下是Chromium)将当前的HTML作为字符串，附加新的字符串并将其写回来-丢失元素的附加信息。更好的方法是

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

最后我将重写reserve如下:

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";
    }
}

event是浏览器传递给onclick处理程序的参数，event.target将保存对被单击元素的引用。(使用console.log(event)查看您可以考虑的其他信息)。
然后是style.backgroundColor，为了演示，我制作了else if和else，因为否则什么都不会发生(默认情况下我没有分配任何背景颜色)。

编辑:Awww - David比我快多了;_;

相关文章：