單擊圖像時更改圖像的src和id（“播放/暫停”按鈕）

Question

我正在嘗試播放/暫停按鈕。 這就是我現在所擁有的。 這是HTML。

<img alt="play" src="img/play.png" id="imgClickAndChange" onclick="changeImage()" class="hidden-xs hidden-sm" style="position: relative; width: 10%; z-index: 10000; margin: 0 auto; top: 42%;"/>

這是JavaScript：

function changeImage() {

    if (document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png") 
    {
        document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
    }
    else {
        if (document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png")
            {
             document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
            }
        }
}

我知道可能不需要第二個“如果”，但兩種方法都行不通。 我只能將圖像從播放圖像更改為暫停圖像，但是當我再次單擊它時，它不會變回來。

謝謝您的幫助！

Answer 1

您在比較那些src值時出錯。 使用==代替=

if (document.getElementById("imgClickAndChange").src == "../final_copy/img/play.png") {
     document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
}
else {
 if (document.getElementById("imgClickAndChange").src == "../final_copy/img/pause.png") {
     document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
 }
}

Answer 2

如果它具有簡單的切換功能，則只需檢查一下即可：

function changeImage() {
  if (document.getElementById("imgClickAndChange").src == "../final_copy/img/play.png") {
        document.getElementById("imgClickAndChange").src = "../final_copy/img/pause.png";
    }else{  
        document.getElementById("imgClickAndChange").src = "../final_copy/img/play.png";
  }
}

Answer 3

您需要var isPasued = false; 切換圖片src！

var isPaused=false;
var imgObj=document.querySelect("img")[0];  //edit this
imgObj.addEventListener("click",function(){
     if(!isPaused){
         imgObj.src="../final_copy/img/play.png";
         isPaused=true;
     }
     else
     {
         imgObj.src="../final_copy/img/pause.png";
         isPaused=false;
     }
});

=是==我同意一個答案！

Answer 4

var element = "document.getElementById("imgClickAndChange").src",
    play = "../final_copy/img/play.png",
    pause = "../final_copy/img/pause.png";

if (element == play) {
    element = pause;
} else {
    if (element == pause) {
        element = play";
    }
}
}