JavaScript单击事件在div上不起作用_Javascript

JavaScript单击事件在div上不起作用

javascript

JavaScript单击事件在div上不起作用,javascript,Javascript,我有两个彩色的div，我想把事件放在上面。我已经使用getElementById选择了它们，这很好——当我将console.log作为变量时，我得到了正确的div 然而，click事件似乎根本没有触发。我基本上只是想检查它是否与console.log一起工作，所以这就是函数返回的结果以下是HTML代码： <html> <head> <style> #red{ background: red; width: 50px; he

我有两个彩色的div，我想把事件放在上面。我已经使用getElementById选择了它们，这很好——当我将console.log作为变量时，我得到了正确的div

然而，click事件似乎根本没有触发。我基本上只是想检查它是否与console.log一起工作，所以这就是函数返回的结果

以下是HTML代码：

    <html>
   <head>
   <style>
  #red{
  background: red;
  width: 50px;
  height: 50px;
   }

  #blue {
  background-color: blue;
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

    </div>
      <div class="color picker">
        <h2>Pick a color!</h2>
          <div id="red"></div>
          <div id="blue"></div>
          <div id="green"></div>
    </div>          
    </div>
</body>
<html>

谢谢你的帮助

您似乎还没有调用

loadEventListeners

。这样做应该可以解决问题。

永远不会调用loadEventListeners函数。您可以在之后直接调用它，也可以使用

函数pickRed（）{
log（“您选择了红色”）；
}
函数loadEventListeners（）{
document.getElementById（'red'）。addEventListener（'click'，pickRed）；
};
loadEventListeners（）
#红色{
背景：红色；
宽度：50px；
高度：50px；
}
#蓝色的{
背景颜色：蓝色；
宽度：50px；
高度：50px；
}

选一种颜色！
scrip何时与HTML相关？您可能希望将代码包装在DOMContentLoaded中，以便JavaScript在执行之前等待元素被绘制到页面上。addEventListener（'DOMContentLoaded'，function（）{//configure here}）；->哪里调用了loadEventListeners
？脚本是如何包含的？@RubensMelo为什么这个答案上的评论是错误的。你知道你可以按住Ctrl+M键或单击按钮在网站上制作片段吗？天哪，我怎么会错过这个？非常感谢。
var redColor = document.getElementById('red');
var blueColor = document.getElementById('blue');


function loadEventListeners(){

  redColor.addEventListener('click', pickRed);

};


function pickRed(){

  console.log("You have selected red");
}