Приходится дважды щелкнуть, чтобы вызвать кнопку щелчка

Question

Я должен нажать 2 раза на моем onclick-button, чтобы активировать его впервые.После первых 2 нажатий кнопка работает как положено.

Вот мой код:

var cv3 = document.getElementById("gallerycanvas");
var context03 = cv3.getContext("2d");
var buttonnext = document.getElementById("buttoncanvasnext");

var myImages = [
    'Skins/MonkeyKing_0.jpg',
    'Skins/MonkeyKing_1.jpg',
    'Skins/MonkeyKing_2.jpg',
    'Skins/MonkeyKing_3.jpg',
    'Skins/MonkeyKing_4.jpg',
    'Skins/MonkeyKing_5.jpg',
    'Skins/MonkeyKing_6.jpg'
];
var img = document.createElement("img");
var i = 0;
img.setAttribute('src', myImages[i])

img.onload = function() {
    context03.drawImage(img, 0, 0);

    if (i >= myImages.length) {
        i = 0;
    }

    buttonnext.onclick = function() {    
        img.setAttribute('src', myImages[i++]);
        context03.drawImage(img, 0, 0);
    }
}

Вы можете мне помочь?Спасибо!

Answer 1

Когда вы используете i++ для увеличения i, значение будет возвращено до увеличения операнда.

Изменить buttonnext.onclick функцию на,

buttonnext.onclick = function() {
  i++;
  img.setAttribute('src', myImages[i]);
  context03.drawImage(img, 0, 0);
}

И чтобы петля изображения работала, продолжая нажимать на кнопку, выполните следующие изменения,

img.onload = function() {
    context03.drawImage(img, 0, 0);

    buttonnext.onclick = function() {
       if (i >= myImages.length - 1) {
          i = 0;
       } else {
          i++;
       }
       img.setAttribute('src', myImages[i]);
       context03.drawImage(img, 0, 0);
   }
}

Answer 2

Используйте ++i вместо i++

Чтобы почувствовать разницу, просто используйте оба в предупреждении консоли.

++ i (pre) увеличение перед с использованием переменной

i ++ (post) приращение после

Answer 3

Проблема в вашем методе onclick. Вы используете i ++ в массиве

buttonnext.onclick = function() {
  img.setAttribute('src', myImages[i++]);
  context03.drawImage(img, 0, 0);
}

Вместо этого используйте i ++ перед настройкой изображения src;

buttonnext.onclick = function(){
   i+=1;
   img.setAttribute('src', myImages[i]);
   context03.drawImage(img,0,0);
}

Спасибо