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

Question

I know this has been answered before, but I can't for the life of me figure out why this wouldn't work. I've checked, and re-checked, and everything looks like it should work outright, but I'm not sure what I would be missing with this. Here's what I have:

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 link: https://codepen.io/ultraloveninja/pen/ZEOLKeV

It should work and show a random image on load and then when you click the link/button load up a new on. So, not sure why they wouldn't be showing overall and I'm not getting any errors in the console.

Answer 1

You need an <img> instead of a <div> element and the class name is wrong for the <a> element here is a correction of your code

 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>

Answer 2

Your <div id="images"></div> tries to change its src here:

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

however it does not have an image source, since it's a div.

it should be: <img id="images"> instead of the div.

Answer 3

You need to investigate the issue step by step:

1. Make sure that init is actually running (add a console.log in the beginning of it - see/run the code below) OK, init works as you can see...

2. Make sure that you capture the button correctly (add a console.log with it) Oh, it's actually null and then there is an error of adding an event listener to a null value

Why is that? Oh, you have btn-img on the button, but btn-image in your code. Making both class names the same solves the problem.

The second problem you have is that the image should be <img id="images"> and not a 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>