Javascript数组，图像链接，链接[重复]答案

【问题标题】：Javascript array, image links, linking [duplicate]Javascript数组，图像链接，链接[重复]
【发布时间】：2016-10-22 05:20:20
【问题描述】：

<!DOCTYPE html>
<html>
<head>
<title>Controlled Assessment!</title>
<link rel="stylesheet" href="Css/stylesheet.css" type="text/css"/>
<!-- This is the webpage i found how to link an external script http://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file -->
</head>

<body>

    <img id="color" src="Pictures/green.jpg" >

    <p id="hel">he</p>

    <button onclick="nxt()">new colour</button>

    <script type="text/jscript" src="JavaScript/trafficlight.js" />
</body>


<footer>

    <script src="JavaScript/trafficlight.js"></script>

</footer>


</html>

这是我的html代码

//My array that will be used for the traffic light sequence
var colour = ["Pictures/red.jpg", "Pictures/green.jpg", "Pictures/amber.jpg"];

function nxt() {

"use strict";
document.getElementById("hel").innerHTML = "helllll";

document.getElementById("color").innerHTML = colour["Pictures/red.jpg"];
}

这是我的 Javascript 我想要做的是，当您单击按钮时，图像更改为在 javascript 部分的数组中列出的不同图像，在这种情况下，我试图从绿色变为红色，但它是不工作，我真的很困惑为什么？？

【问题讨论】：

您通过修改src 属性而不是innerHTML 来更改图像。

标签： javascript html arrays image external

【解决方案1】：

要更改图像的 src，请执行以下操作： document.getElementById("color").src = colour[0];

此外，您的 colour["Pictures/red.jpg"] 没有多大意义。通过你想要的元素的 id 来查找它。

//My array that will be used for the traffic light sequence
var colour = ["Pictures/red.jpg", "Pictures/green.jpg", "Pictures/amber.jpg"];

function nxt() {
document.getElementById("hel").innerHTML = "helllll";

document.getElementById("color").src = colour[0];
}

    <img id="color" src="Pictures/green.jpg" >

    <p id="hel">he</p>

    <button onclick="nxt()">new colour</button>

【讨论】：