单击按钮以使用“addEventListener [重复] 更改图像答案

【问题标题】：Click on button to change image using "addEventListener [duplicate]单击按钮以使用“addEventListener [重复] 更改图像
【发布时间】：2018-01-25 07:32:46
【问题描述】：

我想要实现的是当我单击 id="black" 的 div 图像从一个图像变为另一个图像。但我不知道是什么去做

var image = document.getElementById("change");
var black = document.getElementById("black");

black.addEventListener("click", changeBlack());

function changeBlack() {
  if (image.src == "img/backpack.jpeg") {
    image.src = "img/back.jpeg";
  } else {
    image.src = "img/backpack.jpeg";
  }
}

<div class="product">
  <img class="product__img" src="img/backpack.jpeg" alt="images" id="change">
  <h2 class="heading-2">Hugger 30L</h2>
  <p class="paragraph">Smart carry-on backpack</p>
  <h4 class="text-price">Kr 1599</h4>

  <div class="product__colors">
    <div class="product__colors--black " id="black"></div>
    <div class="product__colors--white"></div>
    <div class="product__colors--green"></div>
  </div>
</div>

【问题讨论】：

您还没有说明您的问题，但是查看您的代码，addEventListener 的第二个参数应该是一个函数，但是您传递的是一个函数的返回值。将changeBlack() 替换为changeBlack

标签： javascript

【解决方案1】：

您应该删除括号()，将是：

black.addEventListener("click", changeBlack );

而不是：

black.addEventListener("click", changeBlack() );
___________________________________________^^

【讨论】：

【解决方案2】：

我会在函数中声明图像。

function changeBlack()
{
    var image = document.getElementById("change");
    if (image.src == "img/backpack.jpeg")
    {
        image.src = "img/back.jpeg";
    }
    else
    {
        image.src = "img/backpack.jpeg";
    }
}

【讨论】：