JavaScript 변수 이미지가 예상 값이 아닙니다.

Question

저는 HTML과 JavaScript를 완벽하게 초보합니다. 문제가 발생했습니다. 나는 버튼이 있고 onclick에서, 내가 가진 :

onclick="document.getElementById('slideCurrent').src=images[1]" 

및 자바 스크립트 부분에, 내가 가진 :

var images = [ 
    "PATH BLABLABLA_1", 
    "PATH BLABLABLA_2", 
    "PATH BLABLABLA_3" 
]; 

어떤 이유로 들어, 이미지를 표시하지 않습니다. 그러나 경로를 직접 입력하면 정상적으로 작동합니다.

내가 원하는 것은 적절한 이미지가 배열 인덱스를 기반으로 나타납니다. 어떤 이유로, 콘솔은 경로가 올바르지 내게 말하고있다 :
Failed to load resource: net::ERR_FILE_NOT_FOUND

여기에 더 완전한 코드 :

<img id="slideCurrent" 
     src="file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE1.png" 
     width="500" 
     height="333"/> 

    <input type="image" 
      id="arrowCircularRight" 
      src="file:///C:/Users/philip/Desktop/htmlCSA_files/arrowCircular_right.png" 
      onclick="document.getElementById('slideCurrent').src=images[1]" 
      width="50" 
      height="50"/> 
    <script> 
    var images = [ 
     "file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE1.png", 
     "file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE2.png", 
     "file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE3.png", 
     "file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE4.png", 
     "file:///C:/Users/philip/Desktop/htmlCSA_files/CSA_InfoGuide_TUTORIALSLIDE5.png" 
    ]; 

</script> 

Answer 1

문제는 변수 이름의 당신의 선택입니다. 변수 images은 document.images과 충돌합니다. 다른 변수 이름을 사용하면 작동합니다.

다음은 스 니펫에 사용자 코드 (약간 수정 됨)입니다. 테스트를 위해 스택 오버 플로우에서 유효한 URL로 이미지 URL을 변경하고 <img>의 크기를 조정하고 클릭 할 이미지를 설명하는 행을 추가했습니다. 변수 이름을 images에서 myImages으로 변경했습니다.

<img id="slideCurrent" src="http://i.stack.imgur.com/jy5g5.png"/> 
 

 
<p>Click the image below to change the one above this line (only changes once)</p> 
 

 
<input type="image" 
 
    id="arrowCircularRight" 
 
    src="http://i.stack.imgur.com/wRMuO.png" 
 
    onclick="document.getElementById('slideCurrent').src=myImages[1];" 
 
    width="50" 
 
    height="50"/> 
 

 
<script> 
 
    var myImages = [ 
 
     "http://i.stack.imgur.com/jy5g5.png", 
 
     "http://i.stack.imgur.com/S33VZ.png" 
 
    ]; 
 
</script>