Hello, I am currently working on creating a traffic light using an array of images. My goal is to change the image path specified in the CSS when a button is clicked, to change the appearance of the traffic light. In this case, the 'content.url()' line in each class needs to be modified when the function is triggered by the button click. The approach I am using right now may not be correct, but it is a starting point for understanding the concept.
<style>
#rect{
height:550px;
width:180px;
border:1px solid #000;
}
.black1 {
position: relative;
top: 10px;
left: 10px;
content.url('black.png')
}
.black2 {
position: relative;
top: 20px;
left: 10px;
content.url('black.png')
}
.black3 {
position: relative;
top: 30px;
left: 10px;
content.url('black.png')
}
</style>
<Body>
<div id="rect">
<img class="black1" />
<img class="black2" />
<img class="black3" />
</div>
<script>
var x = ["black.png", "red.png", "orange.png",'green.png'];
var i = -1;
function change(){
i++;
if (i == 0){
document.getElementByClass('black1').src=x[1];
document.getElementByClass('black2').src=x[0];
document.getElementByClass('black3').src=x[0];
}
}
</script>
<button onclick = "change()">Change light</button>
</div>
</Body>
</html>