javascript - 使用 javascript 的事件 onclick 函数更改 img -- 已解决

Question

我很难理解为什么每次单击特定属性时我的页面都不会更改。

我有我的第一个图像所在位置的 html:

<!-- Face Column Starts -->
      <div class="col-md-4">
        <div class="float-right" id="face">
          <!-- Image size: 587 width x 419 height -->
          <img src="../static/images/face.png" alt="" width="350" usemap="#facemap" href="#face" class="face" onlick="changeProduct()">
          <map name="facemap">
            <div class="blush">
              <area  shape="circle" coords="260,185,25" href="#blush" alt="blush" onclick="changeProduct()">
              <area shape="circle" coords="100,185,25" href="#blush" alt="blush" onclick="changeProduct()">
            </div>
            <div class="eyeshadow">
              <area  alt="eyeshadow" id="right" href="#eyeshadow" shape="poly" coords="222,116,230,102,245,90,265,83,286,84,318,100,312,109,290,98,259,100,222,116 " onclick="changeProduct()">
              <area alt="eyeshadow" id="left" href="#eyeshadow" shape="poly" coords="133,116,113,106,78,97,45,105,38,104,65,80,89,80,90,81,97,83,105,86,133,116" onclick="changeProduct()">
            </div>
            <div class="eyeliner">
              <area  alt="eyeliner" id="right" href="#eyeliner" shape="poly" coords="220,118,259,100,275,100,295,100,305,105,315,110,300,115,275,122,259,124,222,118 " onclick="changeProduct()">
              <area alt="eyeliner" id="left" href="#eyeliner" shape="poly" coords="131,118,113,106,78,97,42,107,65,120,89,126,105,124,133,118" onclick="changeProduct()">
            </div>
            <area class="foundation" shape="rect" coords="0,419,587,0" href="#foundation" alt="foundation" onclick="changeProduct()">
          </map>
        </div>
      </div>
      <!-- Face Column Ends -->

我使用了一张 map ，以便我可以点击脸部的不同区域。当我这样做时，我希望它在不同的图片之间交替。

这是我在我的 javascript 文件中使用的:

    var image =  document.getElementById("face");

    function changeProduct() {
        if (image.getAttribute('alt') == "blush") {
            image.src = "../images/blush.png";
        } else if (image.getAttribute('alt') === "foundation") {
            image.src = "../images/foundation.png";
        } else if (image.getAttribute('alt') === "eyeshadow") {
            image.src = "../images/eyeshadow.png";
        } else {
            image.src = "../images/eyeliner.png";
        }
    }

预期输出:当我点击腮红(脸颊)时，我的图像来自 face ! blush !

但是，我看不到任何变化。

有人可以帮助澄清我做错了什么吗？

更新:我尝试了一种不同的方法并从我想要的得到了正确的结果，我为每个实例创建了 4 个不同的变量并添加了一个事件监听器单击函数而不是 HTML onclick。对于将来可能遇到类似问题的任何人，以下是我解决错误的方法:

var foundationListen = document.querySelectorAll("[alt='foundation']");

for(var i=0; i < foundationListen.length; i++){

    foundationListen[i].addEventListener("click", function(){

        var image =  document.querySelector("div#face img");
        image.src = "../static/images/foundation.png";

    });

};

谢谢评论里帮助过的人!!

Answer 1

使用 onclick 方法对我不起作用，所以我将点击监听器附加到我想点击的每个属性上，只是更改了图像源。这是对我有用的代码!

var foundationListen = document.querySelectorAll("[alt='foundation']");

for(var i=0; i < foundationListen.length; i++){

    foundationListen[i].addEventListener("click", function(){

        var image =  document.querySelector("div#face img");
        image.src = "../static/images/foundation.png";

    });

};