如何使用单个按钮循环显示图像?

时间:2022-05-05 07:12:35

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:

我刚刚开始在GCSE级别的notepad ++中编写javascript代码。我的评估中的任务之一是让交通灯变色,每个按钮点击一个图像。我已经将红灯变为红黄灯了。但是,我无法继续这样做。我的代码到目前为止:

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

(我会继续和这个问题一起研究)

1 个解决方案

#1


0  

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

#1


0  

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