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。将脚本标记放在<img>标记末尾的<body>下方。

<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＆＃39; s $(function() { });但使用纯JavaScript ）。
见here

Answer 2

解决方案是在<{em> <img>标记之后将javaScript代码放在正文中。在图像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无法更改图像源

2 个答案: