I found in one of the topics and saved the code in index.html, but for some reason it does not work. I have 3 pictures: note.png, note_30.png, note_30_.png, I corrected the code in accordance with these pictures. A picture of note.png appears on the screen. But the click does not occur, the picture does not change. All pictures are in the same folder as the index. What have I done wrong?

Here is the code:

<html> <head> <title>Смена картинок</title> <script language="javascript"> var i=0; var image=document.getElementById("image"); var imgs=new Array('note.png','note_30.png', 'note_30_.png'); // Добавте свои картинки через запятую function imgsrc(){ i++; image.src=imgs[i]; } </script> </head> <body> <img id="image" src="note.png" onClick="imgsrc();"> </body> </html>

To see the script in action, uploaded it to a temporary host: http://melody.a-workshop.ru/index.html

  • one
    Apparently the page still does not have time to load, as the code var image=document.getElementById("image"); already working out .... you need to initialize it after downloading the content .... window.onload for example or DOMContentLoaded learn.javascript.ru/onload-ondomcontentloaded - Aleksey Shimansky
  • Everything worked, it was enough to put the script after the image was displayed on the screen. But now I have one more question: how to stop the change of images after the array is exhausted? So that after the last image of the array is displayed, nothing happens when you click on the image. - Vyacheslav Chernyshov
  • one
    It is natural to check i and the length of the array ..... and nullify at height .... by the way, I drew this in answer - Alexey Shimansky

3 answers 3

 <html> <head> <title>Смена картинок</title> <script language="javascript"> var i=0; var imgs=new Array('note.png','note_30.png', 'note_30_.png'); // Добавте свои картинки через запятую function imgsrc(){ var image=document.getElementById("image"); image.src=imgs[++i]; } </script> </head> <body> <img id="image" src="note.png" onClick="imgsrc();"> </body> </html>

The problem was in the line var image = document.getElementById ("image"). You have not built a DOM, and you already want to find an element in Id. In my version, the element is searched for when a click handler is called. Everything is working.

    Everything was decided very simply:

     <script language="javascript"> var i=0; var image=document.getElementById("image"); var imgs=new Array('note.png', 'note_50.png', 'note_50_.png'); //Добавте свои картинки через запятую var j=imgs.length; function imgsrc(){ if (i!=(j-1)) {i++;} image.src=imgs[i]; } </script>

    If the variable i has reached the number of the last picture, then more than i does not increase. j is the number of elements in the array. Yes, it was possible to write simply if (i! = ((Imgs.length) -1)), but since I am learning Java, and this case with Javascript was my first experience, I decided not to philosophize, but to break the code so that then it was easier to find an error if this happens.

      Perhaps the page has not yet managed to load, as the code var image=document.getElementById("image"); already working out. It is necessary to initialize it after downloading the content using window.onload , for example, or DOMContentLoaded

      Something like this:

       var image = null; var i=0; var imgs=new Array('http://hronika.info/uploads/posts/2016-01/1452736497_yumor12.jpg','http://orig12.deviantart.net/95e6/f/2015/354/5/0/5025c58061abb2b5f605924f3b90fa69-d9kswcy.jpg', 'http://cs622030.vk.me/v622030198/116a6/epNO4kDDVAY.jpg'); function onDocumentReady() { image = document.getElementById("image"); } function imgsrc() { i++; if (i == imgs.length) i = 0; image.src=imgs[i]; } document.addEventListener("DOMContentLoaded", onDocumentReady); 
       <img id="image" src="https://andrewcollector.files.wordpress.com/2014/10/1.jpg" onClick="imgsrc();">

      • I wrote the code, but for some reason it does not work: function imgsrc () {if (i! = J) {i ++;} image.src = imgs [i]; } - Vyacheslav Chernyshov
      • @ Vyacheslav Chernyshov usually, when something doesn’t work - they write errors, setrays, what exactly doesn’t work, what was expected and what gives out .... Otherwise, this is called - fortune telling on the coffee grounds .... I have no idea what j you and where did it come from - Alexey Shimansky
      • Alexey, line above j is set as the length of the array. - Vyacheslav Chernyshov
      • @ Vyacheslav когда не работает что-то - пишут ошибки, стектрейс, что именно не работает, что ожидалось и что выдает I still don’t see in the comments когда не работает что-то - пишут ошибки, стектрейс, что именно не работает, что ожидалось и что выдает ........ in any case, you don’t reset the variable in your script, I don’t want to guess the rest .... I have a working version in the answer hanging. - Alexey Shimansky