使用 JS 更改图像源不起作用

Question

我正在尝试根据日期更改图像的 src。但是 src 没有更新。有什么问题？

    <head>
<script type="text/javascript">
image = new Array(7);
image[0] = 'img/about-img1.jpg';
image[1] = 'img/about-img2.jpg';
image[2] = 'img/about-img3.jpg';
image[3] = 'img/about-img4.jpg';
image[4] = 'img/about-img1.jpg';
image[5] = 'img/about-img4.jpg';
image[6] = 'img/about-img5.jpg';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.getElementById("special").src=image[imagenumber];
</script>
</head>
<body>
<img  id="special" src="">
</body>

Answer 1

您试图在 DOM 加载之前访问它。将脚本标签放在 <body> 标签末尾的 <img> 下方。

<body>
<img  id="special" src="">

<script type="text/javascript">
image = new ImageArray(7);
image[0] = 'img/about-img1.jpg';
image[1] = 'img/about-img2.jpg';
image[2] = 'img/about-img3.jpg';
image[3] = 'img/about-img4.jpg';
image[4] = 'img/about-img1.jpg';
image[5] = 'img/about-img4.jpg';
image[6] = 'img/about-img5.jpg';
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.getElementById("special").src=image[imagenumber];
</script>
</body>

或者，考虑使用 window.onload 事件来确保您的脚本在 之后执行 DOM 加载（类似于 jQuery的 $(function() { }); 但使用普通 JavaScript).
参见 here

Answer 2

解决方案是将 javaScript 代码放在正文 <img> 标记之后。在 head 中使用它会在图像 DOM 元素存在之前执行它，因此 getElementById() 找不到任何东西。

<head>
</head>
<body>
  <img  id="special" src="">
  <script type="text/javascript">
    var image = [1, 2, 3, 4, 1, 4, 5],
        currentdate = new Date();
    document.getElementById("special").src = 'img/about-img' + image[currentdate.getDay()] + '.jpg';
  </script>
</body>

使用 JS 更改图像源不起作用

Changing image source using JS not working

html

javascript

src