자바 스크립트 함수는 첫 번째 클릭

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

내가

추측에서

, 내가 cc이 -1되는 밖으로 시작 말할 것입니다, 그래서 당신은 당신의 코드를 통해이 지점에 따라 ... 이미지를 변경하려면 2 번을 클릭해야합니다

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

이미 이미지에있는 것과 동일한 경로를 설정하기 때문에 아무 것도 변경되지 않습니다. 그러나 cc은 0이므로 두 번째 클릭이 다음 분기를 따릅니다.

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의 논리를 복제 한

---

BTW,이에 대한 switch 문이되는 것입니다 시리즈를 사용하지만 if/else 시리즈의 논리는 결코 1.png으로 돌아갈 수 없다는 점에 유의하십시오. 또한

그렇지 않으면 당신은 당신이 1.png, 2.png을 가지고 있다는 사실을 키에 원하는 단지 것 때문에, 내가 경로가 더 복잡 실제 이미지를 있으리라 믿고있어주의 등