Compressing a button-based image changer to an array

Question

I'm still quite new to JavaScript so sorry for any incorrect terms etc.

I've got an image changer that uses buttons, and has the image stored within the button, but I know there's a way to compress these into an array and print out image by using 'image_array(0)' for example to get the image from the array.

Code below;

<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button onclick="document.getElementById('image').src='green_light.jpg'">Green</button>
<p></p>
<button onclick="document.getElementById('image').src='yellow_light.jpg'">Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_and_yellow_light.jpg'">Red/Amber</button>
<p></p>
<button onclick="document.getElementById('image').src='red_light.jpg'">Red</button>
<p></p>
<button onclick="document.getElementById('image').src='blank_light.jpg'">Reset</button>
</body>
</html>

I looked for a good 20 minutes for a similar thread but couldn't find anything specific, and with a cheap understanding of JavaScript and HTML, everything I found was too vague for what I'm looking for.

Thanks in advance.

score 0 · Accepted Answer · answered Jan 05 '17 at 14:07

0

The image is not stored within the button, you are just changing the image source on click. If by compress you mean that the image will have less bytes, then you are wrong, an array does not do that. It just keeps information contiguously. The only advantage is you can handle more dynamic things and maybe be more organized.

var imageSources = ["green_light.jpg", "yellow_light.jpg", "red_and_yellow_ligh", "red_light.jpg", "blank_light.jpg"]

var buttons = document.getElementsByClassName("change-image")

for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function () {
    document.getElementById("image").src = imageSources[i]
  }
}

<!DOCTYPE html>
<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button class = "change-image">Green</button>
<p></p>
<button class = "change-image">Amber</button>
<p></p>
<button class = "change-image">Red/Amber</button>
<p></p>
<button class = "change-image">Red</button>
<p></p>
<button class = "change-image">Reset</button>
</body>
</html>

answered Jan 05 '17 at 14:07

juvian

15,875
2
37
38

By compress I mean in terms of actual txt size, as we're doing this all on Notepad and not actually running it on a host. Really helpful code, thank you. – freddie.bumder Jan 05 '17 at 14:09
What do I do with the first block of code? I assume I save it as a separate document but where and in what format? – freddie.bumder Jan 10 '17 at 14:57
You can either put the code inside the html between tags or put in another file and then add it in the html : http://stackoverflow.com/questions/13739568/how-do-i-link-a-javascript-file-to-a-html-file – juvian Jan 10 '17 at 14:59
The image seems to get stuck on the "yellow_light.jpg" and doesn't change to anything else after the first click, which goes to yellow. Any ideas? – freddie.bumder Jan 24 '17 at 15:01
@freddie.bumder You mean in your code? My fiddle works fine. Make sure you use let instead of var on the for – juvian Jan 25 '17 at 14:10

Jyothi Babu Araja · Answer 2 · 2017-01-05T14:11:00.933

If I understand you correctly, you need altering the source of images through keeping images in an array.

[].slice.call(document.querySelectorAll('button'), 0)

Above line is to access all buttons in the DOM.

Do something like this.

var images = ['green_light.jpg',
              'yellow_light.jpg',
              'red_and_yellow_light.jpg',
              'red_light.jpg',
              'blank_light.jpg'
             ];

var imageElement  = document.getElementById('image');

[].slice.call(document.querySelectorAll('button'), 0).forEach(function(button, index){
  button.addEventListener('click',function(e){
    imageElement.src = images[index];
    console.log("Image changed to: ", images[index]);
  });
});

<html>
<body>
<img id="image" src="blank_light.jpg" style="width:100px">
<p></p>
<button>Green</button>
<p></p>
<button>Amber</button>
<p></p>
<button>Red/Amber</button>
<p></p>
<button>Red</button>
<p></p>
<button>Reset</button>
</body>
</html>

Compressing a button-based image changer to an array

2 Answers2