单击按钮以使用"addEventListener“更改图像

Question

我试图实现的是，当我点击带有id=“黑色”的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>

​

Answer 1

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

black.addEventListener("click", changeBlack );

而不是：

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

Answer 2

我会在函数内部声明image。

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