Question

我有两个要在其上放置事件的彩色div。我已经使用getElementById选择了它们，并且效果很好-当我console.log变量时，我得到了正确的div。

但是，点击事件似乎根本没有触发。我基本上只是想检查它是否与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>

这里是JavaScript

var redColor = document.getElementById('red');
var blueColor = document.getElementById('blue');


function loadEventListeners(){

  redColor.addEventListener('click', pickRed);

};


function pickRed(){

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

谢谢您的帮助！

Answer 1

似乎您没有打loadEventListeners。这样做应该可以解决问题。

Answer 2

您的loadEventListeners函数从不被调用。您可以在之后直接调用它，也可以使用IIFE

function pickRed(){
  console.log("You have selected red");
}

function loadEventListeners(){
  document.getElementById('red').addEventListener('click', pickRed);
};

loadEventListeners();

#red{
  background: red;
  width: 50px;
  height: 50px;
}

#blue {
  background-color: blue;
  width: 50px;
  height: 50px;
}

  <html>
   <head>
</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>

JavaScript点击事件不适用于div

2 个答案: