Question

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

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

谢谢

Answer 2

使用$nopt增加i++时，将在增加操作数之前返回该值。

将i函数更改为

buttonnext.onclick

要使图像循环在单击按钮时起作用，请进行以下更改，

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

Answer 3

使用++i代替i++

要感觉与众不同，只需在控制台警报中同时使用。

++ i（预）使用变量

之前递增

i ++（发布）在之后

后递增

必须单击两次以触发onclick按钮

3 个答案: