Question

＆＃13;

<!DOCTYPE html>
<html>
<body>

<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg">

<button type="button" onclick="changeLights()">Change Lights</button>

<script>
var list = [
    "H:\IT\traffic-light-red.jpg",
    "H:\IT\traffic-light-red-amber.jpg",
    "H:\IT\traffic-light-green.jpg",
    "H:\IT\traffic-light-red.jpg"
];

var index = 0;

function changeLights() {
    index = index + 1;

    if (index == list.length) index = 0;

    var image = document.getElementById('light');
    image.src=list[index];
}
</script>

</body>
</html>

＆＃13;

我不明白为什么代码不起作用。每当我尝试在浏览器中打开它时，它都不会向我显示图像。这是我在学校里努力做的事情，并且会感谢有人能指出我正确的方向。

Answer 1

您没有正确选择图像。

您只需要更改img元素的ID;

var list = [
  "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png",
  "https://pixabay.com/static/uploads/photo/2012/05/07/04/43/button-47963_640.png",
  "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/128/trafficlight-green.png"
];

var index = 0;

function changeLights() {
    index = index + 1;

    if (index == list.length) index = 0;

    var image = document.getElementById('light');
    image.src=list[index];
}

<img id="light" src="https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png" width="100" height="100">
<button type="button" onclick="changeLights()">Change Lights</button>

在此片段图片中托管来自其他网站或CDN。此外，您的图像路径看起来是错误的。请检查您的图片路径。

Answer 2

如果您在浏览器的地址栏中输入“H：\ IT \ traffic-light-red.jpg”会有效吗？不！因为它试图访问文件系统上的图像。您需要使用file protocol。所以它会是这样的：

<!DOCTYPE html>
<html>
<body>

<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg">

<button type="button" onclick="changeLights()">Change Lights</button>

<script>
var list = [
    "file:///H:/IT/traffic-light-red.jpg.html"
    "file:///H:/IT/traffic-light-red-amber.jpg",
    "file:///H:/IT/traffic-light-green.jpg",
    "file:///H:/IT/traffic-light-red.jpg"
];

var index = 0;

function changeLights() {
    index = index + 1;

    if (index == list.length) index = 0;

    var image = document.getElementById('light');
    image.src=list[index];
}
</script>

</body>
</html>

如果文件托管在网络上的某个位置（如dropbox），您也可以抓取这些链接，这样就可以了。

Answer 3

您的图片来源不正确将您的图片放在项目目录根目录中的html文件附近，然后对您的来源使用类似的内容：<img src="image_url" />

你的img元素的id与getElementById方法

不匹配

Answer 4

这就是我用的，希望它有所帮助！

＆＃13;

<html>
<head>
<b> <u> <i>Traffic Light System</i> </u> </b>
</head>
<body>

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png">

<button type="button" onclick="nextLightClick()">Next Light</button>

<script>

var lights = new Array("http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/232px-Yellow_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/4/4b/Green_Light_Icon.svg");



var index = 0;
var lightsLen = lights.length;

function nextLightClick() {
    index++;

    if (index == lightsLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = lights[index];
}
</script>

</body>
</html>

＆＃13;

javascript数组交通灯

4 个答案: