Question

我无法获取单独的JavaScript文件来使用我的XHTML文件。我想使用JavaScript更改HTML文件中的图片，因此我编写了以下代码：

var image = new Array()
image[0] = "image0.jpg";
image[1] = "image1.jpg";
image[2] = "image2.jpg";
image[3] = "image3.jpg";

var demo = function() {
    document.getElementById("slide").src = image[1];
}

demo();

在我的HTML文件中我有

<head>
<title>Webdesign Tutorial</title>
<link rel="stylesheet" type="text/css" href="Home page.css">
<script type="text/javascript" src="ImagesSlide.js"></script>
</head>
<body>
    <p><img id="slide" src="image0.jpg" width="500" height="300" name="slide" /></p>
</body>

所有文件名都是正确的，当我把＆＃34; document.get ....＆＃34;在我的HTML文件中划分为脚本标记，它确实会更改图像。

Answer 1

正如所指出的，你必须听取文件就绪事件。

基本概念是您的浏览器解释标签中的javascript时调用您的demo函数。在您的情况下，这是在您引用的DOM对象出现之前。

暂时有用的是将脚本标记放在文档的末尾（就在之前）。

或者您可以将javascript更改为：

var image = new Array()
image[0] = "image0.jpg";
image[1] = "image1.jpg";
image[2] = "image2.jpg";
image[3] = "image3.jpg";

var demo = function() {
    document.getElementById("slide").src = image[1];
}

window.onload = demo;

请注意，这可能不是100％跨浏览器兼容。通常jQuery是一个很好的方式，不必担心跨浏览器问题，认为这是以大小为代价而不是学习正确的javascript，而不是你不付出努力。

我在这里为你做了一个例子：

http://jsbin.com/yoguhayi/1/edit

为什么我的脚本不会更改<img/>元素的.src？

1 个答案: