I have just started coding javascript in notepad++ at a GCSE level.
One of my tasks in my Assessment is to make traffic lights change colour, one image for each button click.
I have got as far as Making the Red light change to a Red-Yellow light. However, I am unable to go further with this.
My code so far:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function lewis() {
document.getElementById("pic").src="Red-Yellow.png"
}
</script>
</head>
<body>
<button type="button" onclick="lewis()">
Change Lights</button>
<img src="Red.png" alt="Red" id="pic" style="width:250px;height:600px;">
</body>
</html>
This is the height of my ability as I have just started.
Any help would be appreciated, many thanks,
Lewis
(I will continue to do research alongside this question)
Didn't tested but i guess you want something like that.
function lewis() {
var current_image = document.getElementById("pic").src;
if(current_image == "Red.png"){
document.getElementById("pic").src = "Red-Yellow.png";
}else if(current_image == "Red-Yellow.png"){
document.getElementById("pic").src = "Red-Green.png";
}else if(current_image == "Red-Green.png"){
document.getElementById("pic").src = "last-color.png";
}else if(current_image == "last-color.png"){
document.getElementById("pic").src = "Red.png";
}
}
Related
Could someone please explain why the following code below doesn't run an automated sequence of images'. I was able to do this before with my code prior to this now that I have edited it slightly the automation doesn't work.
<!DOCTYPE html>
<html>
<body>
<img id="Light" src="./red.jpg">
<button type="button" onclick="ChangeLights()">Change Lights</button>
<script>
var List = [
"./red.jpg",
"./redyellow.jpg",
"./green.jpg",
"./yellow.jpg",
];
window.onload = "ChangeLights()";
var index = -1;
function ChangeLights() {
index ++;
var image = document.getElementById('Light');
image.src = List[index % List.length];
}
setInterval(ChangeLights, 1000)
</script>
</body>
</html>
It works fine, but you can change Array to a different name and call ChangeLights(); without "" in line 18 .
The automation works, but the path to the images is wrong, you should fix that by pointing to the right folder, probably by removing the "./" on "./NAME_OF_THE_IMAGE".
This is the code I am currently working with: I need to display a starting image (preferably green) and then, every time the button is clicked, the image needs to change to trafficlight and then to the other image which it didn't start as. e.g it needs to go from green to orange then red then back to orange etc.
<!DOCTYPE html/>
<html>
<script type="text/javascript">
var trafficlight = [];
trafficlight [0] = " http://4vector.com/i/free-vector-traffic-light-green- clip-art_117820_Traffic_Light_Green_clip_art_medium.png ";
trafficlight [1] = "http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_ dan_01.svg.med.png ";
trafficlight [2] = "http://www.clker.com/cliparts/1/f/a/2/11949849771043985234traffic_light_red_dan_ge_01.svg.med.png ";
var num = 0;
function changepic()
{
if (num>=trafficlight.length-1){
num=0;
}
num=num+1;
document.trafficlight.src=trafficlight[num];
}
</script>
</head>
<body>
<center>
<img src ="http://4vector.com/i/free-vector-traffic-light-green-clip- art_117820_Traffic_Light_Green_clip_art_medium.png" name="trafficlightpic" width="400" height="400" />
<p>click here</p>
</center>
</body>
</html>
As noted by Jonas W - you are trying to referecnce the image but using the wrong reference. You can either do it via an id or using the name as you have. Note that if you are using the name then you need to reference it with a [0] after it as I have in the post - this is because getting the element by name will return an array like object - so you need to specify that its the first item in that. Also your image src for the orange light is broken. The folowing works and allows swapping of the src (with the exception that the yellow light image does not display).
var trafficlight = ["http://4vector.com/i/free-vector-traffic-light-green-clip-art_117820_Traffic_Light_Green_clip_art_medium.png","http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_dan_01.svg.med.png","http://www.clker.com/cliparts/1/f/a/2/11949849771043985234traffic_light_red_dan_ge_01.svg.med.png"];
function changepic()
{
var imageSrc=document.getElementsByName('trafficlightpic')[0].src;
var num =trafficlight.indexOf(imageSrc);
if (num >= trafficlight.length-1){num=-1;}
num+=1;
document.getElementsByName('trafficlightpic')[0].src=trafficlight[num];
}
<center>
<img src ="http://4vector.com/i/free-vector-traffic-light-green-clip- art_117820_Traffic_Light_Green_clip_art_medium.png" name="trafficlightpic" width="400" height="400" />
<p onclick="changepic();">click here</p>
</center>
document.trafficlight doesn't exist. You need:
document.getElementById("trafficlightpic").src=trafficlight[num];
instead. And you should change name="" to id="" in the img element. That should work.
In this code, the images won't appear once I run it in the browser. I have tried different browsers and different ways to sort the image. Could you tell me why this is happening and how I will be able to fix this because I have been trying for days now. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"C:\Users\Mrs Afolabi\Documents\Computing\lights\green.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\amber.gif",
"C:\Users\Mrs Afolabi\Documents\Computing\lights\red.gif"
];
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Traffic Light Sequence</title>
</head>
<body>
<h2>Manuel Traffic Light Sequence</h2>
<img id="light" src="red.gif">
<button type="button" onClick="changeLights()">Change Lights</button>
<script>
var list = [
"red.gif",
"green.gif",
"amber.gif"
];
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>
I've cleaned up the code a little. Note that the full path has been removed from the images.
Where ever the HTML file is located if the images are located directly next to the HTML file then they do not need an absolute path (c:/...). Instead relative paths should be used. So assuming the HTML file is found at C:\Users\Mrs Afolabi\Documents\Computing\lights\index.html then the following code below should work as it can easily find the .gif files.
Natively there's no permission to access this kind of URL (from user's computer) that starts of file://, C://, etc... (in any web browser)
If your file is located at some directory in computer, then you can input the files you'll use that are in the same directory, like:
src/styles.css, file.png, etc
Can someone please help me how to loop my function ?
here is my code i just want that my will execute more times than only one.
I have already tried to create my own for loop, but it doesnt work.
Hope someone is so friendly to help me out with my problem and can give little bit explain about how to get rid of my problem with loops.
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
windows.open(i);
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
<a h ref ="javascript:MultiplyLinks()">Open More links</a>
</body>
</html>
Well guys thanks . I 've got the problem.
i have used windows.open(i);
but it has to be MultiplyLinks(i);
otherwise it will never recognize my function.
i just wanted that my 3 links will executed more times and that works for now.
Thanks for all the replies.
Few issues:
1) you've got a typos
change
windows.open(i)
to
window.open(i)
2) Why are you trying to open i rather than use a url?
suggest you change i to something more meaningful like:
window.open('http://someusr');
3) you have a space in the anchor tag :
change
<a h ref=
to
<a href=
so the final code:
<html>
<head>
<script type="text/javascript">
for (var i = 1; i<=4; i++){
window.open('http://www.stackoverflow.com');
}
function MultiplyLinks(){
window.open("#")
window.open("#")
window.open("#")
}
</script>
<title>Javascript MultiplyLinks Opener</title>
</head>
<body>
Open More links
</body>
</html>
var links = [
'http://jquery.com',
'http://stackoverflow.com/',
'https://bitbucket.org',
'https://github.com'
];
for (var i = 0; i < links.length; i++){
window.open( links[i] );
}
I am trying to use Javascript to swap an image, so far I can get it from A to B, but not back.
Here is what I'm using to create one swap:
<img src="pic1.png" name="pic" onclick="window.document.pic.src='pic2.png';"/>
This swaps image 1 to image 2, simple enough. But I want to be able to revert back to image 1 by clicking on the new image 2. I tried using this:
<img src="pic1.png" name="pic" onclick="
if (window.document.pic.src='pic1.png'){
window.document.pic.src='pic2.png';
}
else if (window.document.pic.src='pic2.png'){
window.document.pic.src='pic1.png';
}"/>
It doesn't seem to work in this instance. It will switch to pic2, but not switch back to pic1. Is it something to do with onclick? My if statements? Thanks
Try this simple trick... easy to maintain.
<script>
var onImg= "on.jpg";
var offImg= "off.jpg";
</script>
<img src="on.jpg" onclick="this.src = this.src == offImg ? onImg : offImg;"/>
In your code the problem is
when you alert window.document.pic.src its print like http://localhost/pic1.png
and then you are are use condition if (window.document.pic.src == 'pic1.png')
how is it true.
try this
<script type="text/javascript">
function test()
{
alert(window.document.pic.src);
//alert msg print like http://localhost/test/pic1.png
if (document.pic.src=='http://localhost/test/pic1.png'){
document.pic.src='pic2.png';
}
else if (document.pic.src=='http://localhost/test/pic2.png'){
document.pic.src='pic1.png';
}
}
</script>
<img src="pic1.png" name="pic" onclick="test()"/>
wrong use of == in if condition
if (window.document.pic.src == 'pic1.png'){
window.document.pic.src='pic2.png';
}
else if (window.document.pic.src =='pic2.png'){
window.document.pic.src='pic1.png';
}"/>
window.document.pic.src='pic1.png' assigns pic1.png to the left hand side. It does NOT compare.
Though not directly relevant, try not to access elements by their name globally. Use their id.
Your javascript should not be inside the onclick. It should be inside a javasctipt function
Combined:
The img tag:
<img src="pic1.png" name="pic" id="pic" onclick="swap()"/>
The javascript
<script>
function swap()
{
if (document.getElementById("pic").src.endsWith('pic1.png') != -1) //==:Comparison
{
document.getElementById("pic").src = "pic2.png"; //=:assignment
}
else if (window.document.pic.src.endsWith('pic2.png') != -1)
{
document.getElementById("pic").src = "pic1.png";
}
}
</script>
Your code is doing what the below lines do, it's not going inside an if else block, so if you remove your if else block the code still will work, because on mouse click it sets the value of src as 'pic2.png', which was 'pic1.png' earlier, and when you click again because it's already pic2.png so it remains the same.
<html>
<head>
<script type="text/javascript">
function swap() {
window.document.pic.src='pic2.png';
}
</script>
</head>
<body>
<img src="pic1.png" name="pic" onclick="swap()">
</body>
</html>
You can try this.
<html>
<head>
<title>Swapping Images</title>
</head>
<body>
<img id="myimg" src="img1.jpg" hieght="300" width="300" onClick="change ()"/>
</body>
</html>
<html>
<head>
<script>
function change () {
var img=document.getElementById("myimg");
if (img.src === "img1")
img.src="img2.jpg";
else
img.src="img1.jpg";
}
</script>
</head>
</html>