单击时使用Javascript更改CSS颜色（addEventListener）

好的，我有这个div，我想当我点击它时它变成红色。最初它应该显示为黑色。如果您获取并测试此代码，您将看到它在加载页面后立即变为红色

如果我取出click1函数上的参数，它可以正常工作。。。 最初它不会是黑色的，但当你点击它时，它至少会变成红色

我在click1上有一个参数，用于将来保存代码行。 因为这段代码最终要处理多个正方形。 我希望能够用JavaScript更改正方形的颜色。我需要它能够区分每个方块。这样它只会更改您单击的正方形的颜色。 我不想为每个方块都做一个新函数。 这就是为什么我要按我的方式设置它

所有的HTML、CSS和Javascript都在这里。 提前谢谢大家。被代码困住和挫败并不有趣。我不知道没有这个社区我该怎么办。我只希望我能贡献尽可能多的钱

var colorcheck=cccc； 函数click1blockid{ document.getElementByIdbox+blockid.style.backgroundColor='ff0000'； colorcheck=document.getElementByIdbox1.style.backgroundColor； console.logcolorcheck； console.logbox+blockid； }; document.getElementByIdbox1.AddEventListener单击，单击11； 试试这个

$'box1'。单击函数{ $'.border box1'.css'background-color'，'red'.css'color'，'red'； };

---

我认为您应该给出函数引用，而不是在那里执行函数：

document.getElementById("box1").addEventListener("click", click1);
//-------------------------------------------------------------^

---

不要在那里调用函数。

您只需要在HTML中添加单击事件

---

并删除document.getElementByIdbox1.AddEventListener单击，单击11

如果要在addEventListener中传递参数，必须修改代码，如下所示

 document.getElementById("box1").addEventListener("click", function(){click1(1);}, false);

---

正如其他人已经提到的，您的第二个addEventListener参数中存在一个问题

您可以查看以下示例：

var colorcheck=cccc； 功能点击1{ document.getElementByIdthis.id.style.backgroundColor='ff0000'； colorcheck=document.getElementByIdbox1.style.backgroundColor； console.logcolorcheck； console.logthis.id； }; document.getElementByIdbox1.AddEventListener单击，单击1； 正如我所评论的，document.getElementByIdbox1.addEventListenerclick、click11是问题所在。你也可以用这个代替点击11传递数字

您可以尝试以下方法：

密码 var colorcheck=cccc； 函数click1blockid{ var self=这个； self.style.backgroundColor='ff0000'； colorcheck=self.style.backgroundColor； console.logcolorcheck； console.logbox+blockid； }; 功能注册事件{ var-box=document.getElementsByClassNamebox；

---

forvar i=0；i您可以在div上单击

<div id="box1" style="width: 100px; height: 100px; backgroundColor: #000000;"  onclick="click1(1)">

或者您可以使用jQuery，而使用jQuery更为优雅：

---

})

它应该是document.getElementByIdbox1.addEventListenerclick，click1；。单击1将调用function@HAL9000检查我的答案，告诉我这是否适合你！用Javascript点击AddEventListener，我不确定你是否理解这个问题。再说一次，你的回答没有回答问题。我认为它更有用，也更简单。。感谢@PraveenKumar投票否决我：这个问题没有jQuery。如果此人在某个TamperMonkey脚本或其他东西中使用它怎么办？@DaanHeskes一个不能使用jQuery的地方怎么办？问题很清楚：使用Javascript单击AddEventListener我相信document.getElementByIdthis.id.style.backgroundColor可以直接用作此.style.backgroundColor。@Rajesh是，当然，你是对的，但由于这只是一个例子，我认为理解这里发生的事情并不容易。

<div id="box1" style="width: 100px; height: 100px; backgroundColor: #000000;"  onclick="click1(1)">

document.getElementById("box1").addEventListener("click", click1(1));

$('body').on('click', '.box', function() {
        var caller = $(this);

  if(caller.hasClass('select-box') == true) {

    caller.removeClass('select-box');

  } else {

    caller.addClass('select-box');

  }