0

Я нашёл в одной из тем и сохранил код в index.html, но почему-то он не работает. У меня есть 3 картинки: note.png, note_30.png, note_30_.png, я исправил код в соответствии с этими картинками. На экране появляется картинка note.png. Но клик не происходит, картинка не меняется. Все картинки лежат в той же папке, что и индекс. Что я сделал не так?

Вот код:

<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>

Для того, чтобы увидеть скрипт в действии, загрузил его на временный хост: http://melody.a-workshop.ru/index.html

3
  • 1
    видимо страница еще не успевает загрузиться, как код var image=document.getElementById("image"); уже отрабатывает.... надо инициализировать это после загрузки контента....window.onload к примеру или DOMContentLoaded learn.javascript.ru/onload-ondomcontentloaded Commented 4 авг. 2016 в 19:35
  • Всё заработало, достаточно было поставить script после вывода на экран картинки. Но теперь у меня есть ещё один вопрос: как остановить смену картинок после исчерпания массива? Чтобы после вывода последней картинки массива при клике на картинку ничего не происходило. Commented 4 авг. 2016 в 19:44
  • 1
    Проверять i и длину массива естественно.....и обнулять при привышении....я кстати в ответе это нарисовал Commented 4 авг. 2016 в 19:46

3 ответа 3

2

Всё решилось очень просто:

<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>

Если переменная i достигла номера последней картинки, то больше i не увеличивается. j — это количество элементов в массиве. Да, можно было написать просто if (i!=((imgs.length)-1)), но, поскольку я изучаю Java, и этот случай с Javascript для меня был первым опытом, я решил не мудрствовать, а разбить код, чтобы потом проще было найти ошибку, если такая случится.

1
<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>

Проблема была в строке var image=document.getElementById("image"). У тебя еще не построился DOM, а ты уже хочешь найти елемент по Id. В моем варианте елемент ищется при вызове обработчика клика. Все работает.

0

Возможно страница еще не успевает загрузиться, как код var image=document.getElementById("image"); уже отрабатывает. Надо инициализировать её после загрузки контента с помощью window.onload, к примеру, или DOMContentLoaded

Что-то типа такого:

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();">

4
  • Я написал код, но он почему-то не работает: function imgsrc(){ if (i!=j) {i++;} image.src=imgs[i]; } Commented 4 авг. 2016 в 20:16
  • @ВячеславЧернышов обычно, когда не работает что-то - пишут ошибки, стектрейс, что именно не работает, что ожидалось и что выдает.... А иначе это называется - гадание на кофейной гуще.... я без понятия что это за j у вас и откуда она взялась Commented 4 авг. 2016 в 20:17
  • Алексей, строкой выше j задана как длина массива. Commented 8 авг. 2016 в 15:08
  • @ВячеславЧернышов я все равно не вижу в комментарии когда не работает что-то - пишут ошибки, стектрейс, что именно не работает, что ожидалось и что выдает ........ в любом случае вы не обнуляете переменную в вашем скрипте, остальное я догадываться не хочу.... у меня рабочий вариант в ответе висит. Commented 8 авг. 2016 в 15:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.