javascript - 必须点击两次才能触发 onclick 按钮

Question

我必须在 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);
    }
}

你能帮帮我吗？谢谢!

Answer 1

使用++i代替i++

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

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

i++(后)递增之后