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

【问题标题】：Have to click twice to trigger onclick button必须单击两次才能触发 onclick 按钮
【发布时间】：2018-09-11 17:15:55
【问题描述】：

我必须在我的onclick-button 上单击 2 次才能第一次触发它。在前 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);
    }
}

你能帮帮我吗？谢谢！

【问题讨论】：

请查看我的第二个问题的更新答案

标签： javascript html css button onclick

【解决方案1】：

使用++i 而不是i++

要感受不同，只需在控制台警报中使用两者即可。

++i (pre) 使用变量递增之前

i++（后）增量之后

【讨论】：

【解决方案2】：

问题在于您的 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);
}

谢谢

【讨论】：

【解决方案3】：

当你使用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);
   }
}

【讨论】：