onclick：图片没有变化

Question

我的目标是通过单击按钮随机更改图像。我找到了一个可以做到这一点的 sn-p，但我想训练我的技能并努力完成它，这就是我目前所得到的：

1. 当我单击按钮时，变量位于第 11 行，没有任何反应，但是当我放置 URL 而不是变量时（从第 22 行从控制台复制），它转到相应的图片。没看懂……

2. 当我的“imageCount”已满时，出现错误

var imageCount = [];
var image = ["img/01.jpg", "img/02.jpg", "img/03.jpeg", "img/04.jpeg"];

function changeImage() {
  var rand = Math.floor(Math.random() * image.length);
  var imageNumber = "\"url('" + image[rand] + "')\""


  if (imageCount.indexOf(rand) === -1) {
    imageCount.push(rand);
    document.getElementById("imageWrapper").style.backgroundImage = imageNumber;

  } else if (imageCount.length === image.length) {
    imageCount = 0;
  } else {
    changeImage();
  }
  console.log(imageNumber);
  console.log(imageCount.indexOf(rand));
  console.log(image[rand]);
  console.log(imageCount);


}

<link href="./style/main.css" rel="stylesheet">
<div class="wrapper">
  <div class="buttonWrapper">
    <button class="button" onclick="changeImage()">Next Pic</button>
  </div>

  <div id="imageWrapper">
    <!--<img src="./img/02.jpg" alt="" id="random">-->
  </div>
</div>

Answer 1

有两件事会阻止您的演示代码工作：

• #imageWrapper没有高度，所以图片没有显示（可能只是因为你页面的CSS缺失）
• 您将imageCount 变量重置为0 而不是[]

var imageCount = [];
var image = ["//baconmockup.com/300/199/", "//baconmockup.com/300/200/", "//baconmockup.com/300/201/", "//baconmockup.com/300/202/"];

function changeImage() {
  var rand = Math.floor(Math.random() * image.length);
  var imageNumber = "url('" + image[rand] + "')"


  if (imageCount.indexOf(rand) === -1) {
    imageCount.push(rand);
    document.getElementById("imageWrapper").style.backgroundImage = imageNumber;

  }

  else if (imageCount.length === image.length) {
    imageCount = [];
  }

  else {
    changeImage();
  }
  console.log(imageNumber);
  console.log(imageCount.indexOf(rand));
  console.log(image[rand]);
  console.log(imageCount);


}

#imageWrapper {
  height: 200px;
  outline: solid black 1px;
}

<div class="wrapper">
  <div class="buttonWrapper">
    <button class="button" onclick="changeImage()">Next Pic</button>
  </div>

  <div id="imageWrapper">
    <!--<img src="./img/02.jpg" alt="" id="random">-->
  </div>
</div>