作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经完成了类(class)作业;这是出于实验目的。
我正在尝试创建一个成功的交通灯序列。但是,当我单击该按钮时,序列的第一张图像保持不变。
为什么不工作?
<!DOCTYPE html>
<html>
<body>
<h1>Traffic Lights Task 3 JavaScript Controlled Assesment 2017</h1>
<p>This is my Traffic Light script</p>
<img id="Traffic_Lights" src="RED.png">
<button type="button" onclick="changeTraffic_Lights()">Change
Lights</button>
<script>
var image = []
image[0] = "RED.png";
image[1] = "AMBERRED.png";
image[2] = "GREEN.png";
image[3] = "AMBER.png";
function changeTraffic_Lights() {
var Traffic_Light_Sequence = document.getElementById('Traffic_Lights');
if (Traffic_Light_Sequence.src == "RED.png") {
Traffic_Light_Sequence.src = image[1];
} else if (Traffic_Light_Sequence.src == "AMBERRED.png") {
Traffic_Light_Sequence.src = image[2];
} else if (Traffic_Light_Sequence.src == "GREEN.png") {
Traffic_Light_Sequence.src = image[3]
} else {
Traffic_Light_Sequence.src = image[0]
}
}
</script>
</body>
</html>
最佳答案
你有两个错误:
1)你需要将脚本放在头部,否则onclick函数将无法提前知道该函数。
2) Traffic_Light_Sequence.src 返回完整路径,因此您需要在示例中使用完整路径。然而,更好的方法是使用占位符变量。例如,定义一个名为“light_state”或其他名称的新变量,并使用其值 0,1,2,3 来确定更改图像的逻辑。
关于javascript - 为什么我的交通灯代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43689352/
Change Lights var lights = [ "assets/red.gif", "assets/yellow.gif", "assets/green.gif", "assets
var lights=["Images/nt1.jpg","Images/nt2.jpg","Images/nt3.jpg","Images/nt4.png"]
我是一名 GCSE 学生,对 JavaScript 很陌生,所以我不确定这是逻辑错误还是语法错误。以下代码应该会导致交通灯的图片在单击按钮时发生变化(从红色变为红色琥珀色,琥珀色然后绿色等......
我是一名优秀的程序员,十分优秀!