Javascript 必须单击两次才能触发onclick按钮

我必须在我的

onclick按钮上单击两次才能第一次触发它。在前两次单击后，按钮按预期工作

这是我的密码：

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);
    }
}

你能帮我吗？谢谢大家!
 问题在于onclick方法。
您正在数组中使用i++

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

相反，在设置图像src之前使用i++

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

谢谢
当您使用
i++
增加
i
时，将在增加操作数之前返回值

将
按钮更改为下一步。单击
函数

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);
   }
}

使用
++i
而不是
i++

要想感受到差异，只需在控制台警报中使用这两种方法

++使用变量之前的i（预）增量

i++（post）increment在
之后，请检查我的更新答案，了解您的第二个问题