javascript - 更改图像 onLoad() - 我的失败在哪里？

Question

我想在页面加载后更改图像。我编写了一个 Java 脚本文件，但我不知道错误在哪里..我在控制台中也没有收到错误...

JavaScript:

function changeImage(){
    changeImage = document.getElementsByClass("carousel-indicators");
    changeImage = changeImage.getElementsByTagName("img")[0].src;

    actualImage = document.getElementsByClass("item active");
    actualImage = actualImage.getElementsByClass("img-wrapper-inner");
    actualImage.getElementsByTagName("img").src = changeImage;
}

我还使用以下方式调用该函数:

<img onload="changeImage()">

问候并谢谢您!

Answer 1

正如 qxz 指出的那样，您可能正在寻找 Document.getElementsByClassName方法。

此外，使用与方法名称相同的变量名称而不使用 var 声明新变量可能会导致意外结果。因为 JavaScript 在覆盖你的作用域方面没有问题。

最后但并非最不重要的一点是，getElementsByClassName 返回一个数组。没有一个 HTMLElement。您应该从数组中检索一个元素来进行操作。而不是尝试更改数组的 src 字段。

因此，组合这些项目将为您提供一些代码，例如:

function handleImageLoad() {
  var loadedImage = document.getElementsByClassName('loadableImage')[0].src;
  document
      .getElementsByClassName('loadState')[0]
      .innerHTML = 'Loaded image: ' + loadedImage;
}

<img class="loadableImage" src="http://lorempixel.com/200/200" onload="handleImageLoad()" />
<p class="loadState">Loading...</p>