Search code examples
javascripthtmlarraysimageexternal

Javascript array, image links, linking

<!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>

That is my html code

//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"];
}

This is my Javascript what i am trying to do is when you click the button the image changes to a different image which is listed in an array in the javascript section in this case im trying to change from green to red but it is not working and im really confused on why??

Solution

  • To change the src of an image you do: document.getElementById("color").src = colour[0];

    Also, you had colour["Pictures/red.jpg"] which doesn't make much sense. Look it up by id of element you desire.

    //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>