JavaScript函數首先點擊

Question

不respoding我有這樣的HTML：

<script type="text/javascript" src="./scripts/changeImage.js"></script> 
    <img id="myimage" onclick="changeImage()" src="./images/avatars/1.png"/> 

這是函數

var cc=0; 

function changeImage(){ 
    if(cc==-1){ 
     cc=0; 
     document.getElementById('myimage').src="./images/avatars/1.png"; 
     } else if (cc==0){ 
     cc=1; 
     document.getElementById('myimage').src="./images/avatars/2.png"; 
     } else if (cc==1){ 
     cc=2; 
     document.getElementById('myimage').src="./images/avatars/3.png"; 
     } else if (cc==2){ 
     cc=0; 
     document.getElementById('myimage').src="./images/avatars/4.png"; 
     } 
    } 

我必須點擊2次改變形象。我嘗試了一些技巧，但沒有。

Answer 1

我必須點擊2次，以改變形象...

在猜測，我會說，cc開始時是-1，所以你通過你的代碼遵循這個分支：

cc=0; 
document.getElementById('myimage').src="./images/avatars/1.png"; 

由於設置了圖像上已經存在的相同路徑，所以沒有任何變化。但是cc是0，所以第二次點擊跟在下一個分支之後。

---

順便說一句，這是switch語句爲：

function changeImage() { 
    switch (cc) { 
     case -1: 
      document.getElementById('myimage').src = "./images/avatars/1.png"; 
      break; 
     case 0: 
      document.getElementById('myimage').src = "./images/avatars/2.png"; 
      break; 
     case 1: 
      document.getElementById('myimage').src = "./images/avatars/3.png"; 
      break; 
     case 2: 
      document.getElementById('myimage').src = "./images/avatars/4.png"; 
      break; 
    } 
    cc = cc == 2 ? 0 : cc + 1; 
} 

或地圖：

var imageMap = { 
    -1: "./images/avatars/1.png", 
    0: "./images/avatars/2.png", 
    1: "./images/avatars/3.png", 
    2: "./images/avatars/4.png" 
}; 
function changeImage() { 

    document.getElementById('myimage').src = imageMap[cc]; 
    cc = cc == 2 ? 0 : cc + 1; 
} 

在上述兩種的，我複製你的if/else的邏輯系列，但請注意，您的if/else系列的邏輯永遠不會讓您回到1.png。

另外請注意，我假設真實圖像路徑更加複雜，因爲如果你只是想鍵關機，你有1.png，2.png事實等