pictures in a table like a traffic light [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have three pictures a picture of a dog, a bear and a cat. My goal is to turn them into a traffic light sequence going from bear, to cat, to dog.using a button and an array, The button is the part I'm confused by as I want all the pictures to be in a vertical line with a "change animal" button at the top. I'm quite new to Html so I'm not great at it.
<table border="0" style="width:100%">
<tr>
<td>
<img src="http://i0.wp.com/cdn.bgr.com/2015/10/bear.jpg?w=625">
</td>
</tr>
<tr>
<td>
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_220/cw_1255/ch_1255/APL/uploads/2014/11/dog-breed-selector-australian-shepherd.jpg">
</td>
</tr>
</table>

Answer 1

Here is a traffic light with animals.
var btn = document.querySelector("button");
var td = document.querySelectorAll("td");
var arr = ['#F00','#FF0','#0F0'];
var item = 0;
td[item + 1].style.backgroundColor = arr[item];
btn.addEventListener("click", function(e) {
td[item + 1].style.backgroundColor = 'transparent';
item = (item > 1) ? 0 : item + 1 ;
td[item + 1].style.backgroundColor = arr[item];
});
table {
width: 150px;
}
table img {
width: 100%;
height: auto;
}
table td {
border: 1px solid #000;
text-align: center;
padding: 10px;
}
<table>
<tr>
<td>
<button>CHANGE ANIMAL</button>
</td>
</tr>
<tr>
<td>
<img src="http://i0.wp.com/cdn.bgr.com/2015/10/bear.jpg?w=625">
</td>
</tr>
<tr>
<td>
<img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg">
</td>
</tr>
<tr>
<td>
<img src="http://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_220/cw_1255/ch_1255/APL/uploads/2014/11/dog-breed-selector-australian-shepherd.jpg">
</td>
</tr>
</table>