<!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部分的数组中列出,在这种情况下我试图从绿色变为红色但是它是不工作,我真的很困惑为什么??
答案 0 :(得分:1)
要更改图像的src,请执行以下操作: document.getElementById(&#34; color&#34;)。src = color [0];
另外,你有颜色[&#34; Pictures / red.jpg&#34;]这没有多大意义。 通过你想要的元素来查找它。
//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];
}
&#13;
<img id="color" src="Pictures/green.jpg" >
<p id="hel">he</p>
<button onclick="nxt()">new colour</button>
&#13;