使用 Javascript 单击按钮获取随机图像答案

【问题标题】：Get Random Image with Button Click with Javascript使用 Javascript 单击按钮获取随机图像
【发布时间】：2021-02-06 21:15:35
【问题描述】：

我知道这个问题之前已经回答过了，但我一生都无法弄清楚为什么这不起作用。我已经检查过，并重新检查过，一切看起来都应该完全正常，但我不确定我会错过什么。这是我所拥有的：

JS：

const images = [

      "https://assets.codepen.io/8689/lake-thumb.jpg",
      "https://assets.codepen.io/8689/photo-thumb.jpg",
      "https://assets.codepen.io/8689/gopro-thumb.jpg"
    ];
    
    function getRandomImage() {
      const rnd = Math.floor(Math.random() * images.length);
      return images[rnd];
    }
    
    function changeImage() {
      const img = document.querySelector("#images");
      img.src = getRandomImage();
    }
    
    function init() {
      const btn = document.querySelector(".btn-image");
      btn.onclick = changeImage;
    }
    
    window.onload = init;

HTML：

<div id="images"></div>

<a href="#" class="btn-img">Get Image</a>

Codepen 链接： https://codepen.io/ultraloveninja/pen/ZEOLKeV

它应该工作并在加载时显示随机图像，然后当您单击链接/按钮时加载新图像。所以，不知道为什么它们不会整体显示，而且我在控制台中没有收到任何错误。

【问题讨论】：

<div id="images"></div> 应该是<img id="images"> 才能工作
顺便说一句，从用户体验的角度来看，最好在加载时对数组进行洗牌，然后用模数循环遍历它们，否则一些点击不会产生新的随机数，它看起来像点击被破坏

标签： javascript html image random

【解决方案1】：

您需要 <img> 而不是 <div> 元素，并且 <a> 元素的类名错误，这是对您的代码的更正

const images = [

      "https://assets.codepen.io/8689/lake-thumb.jpg",
      "https://assets.codepen.io/8689/photo-thumb.jpg",
      "https://assets.codepen.io/8689/gopro-thumb.jpg"
    ];
    
    function getRandomImage() {
      const rnd = Math.floor(Math.random() * images.length);
      return images[rnd];
    }
    
    function changeImage() {
      const img = document.querySelector("#images");
      img.src = getRandomImage();
    }
    
    function init() {
      const btn = document.querySelector(".btn-img");
      btn.onclick = changeImage;
    }
    
    window.onload = init;

    <img id="images">

<a href="#" class="btn-img">Get Image</a>

【讨论】：

【解决方案2】：

您的<div id="images"></div> 尝试在此处更改其src：

  const img = document.querySelector("#images");
  img.src = getRandomImage();

但是它没有图像源，因为它是一个 div。

应该是：<img id="images"> 而不是 div。

【讨论】：

【解决方案3】：

您需要逐步调查问题：

确保init 确实在运行（在它的开头添加一个console.log - 请参阅/运行下面的代码）好的，init 如您所见...
确保正确捕获按钮（添加一个 console.log ）哦，原来是null 然后给空值添加事件监听出错了

这是为什么呢？哦，按钮上有btn-img，但代码中有btn-image。使两个类名相同可以解决问题。

您遇到的第二个问题是图像应该是<img id="images"> 而不是div

const images = [

  "https://assets.codepen.io/8689/lake-thumb.jpg",
  "https://assets.codepen.io/8689/photo-thumb.jpg",
  "https://assets.codepen.io/8689/gopro-thumb.jpg"
];

function getRandomImage() {
  const rnd = Math.floor(Math.random() * images.length);
  return images[rnd];
}

function changeImage() {
  const img = document.querySelector("#images");
  img.src = getRandomImage();
}

function init() {
  console.log("Init works!") // NEW!
  const btn = document.querySelector(".btn-image");
  console.log("Button:", btn) // NEW!
  btn.onclick = changeImage;
}

window.onload = init;

<div id="images"></div>

<a href="#" class="btn-img">Get Image</a>

【讨论】：

哎呀！看起来它将我的img 扩展为images。无论如何，这对于img 到div 来说是有道理的，最初并没有看到这一点。唯一奇怪的是 onload，它应该在窗口加载时填充随机图像，对吗？还是我也读错了。我确实使用console.log 输出对其进行了测试，这似乎有效。
NM - 我想我是通过在 function init() 中添加 changeImage() 得到的。
如果对您有帮助，请将答案标记为已接受:)