文章/答案/技术大牛

发布

社区首页 >问答首页 >交通灯顺序灯不会变

问交通灯顺序灯不会变
EN

Stack Overflow用户

提问于 2016-08-22 12:44:02

回答 3查看 143关注 0票数 0

我试图创建一个交通灯模拟使用html和JavaScript。我设法让开始的图像显示，但按钮不工作。

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-08-22 12:49:56

拿着这个(你应该用互联网来运行这个)

<html>
<body>

<p>Click the button to change to the next light.</p>

<img id="starting_light" src="http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png">

<button type="button" onclick="nextLightClick()">Next Light</button>

<script>

var lights = new Array("http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/232px-Yellow_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/4/4b/Green_Light_Icon.svg");



var index = 0;
var lightsLen = lights.length;

function nextLightClick() {
    index++;

    if (index == lightsLen) 
        index = 0;

    var image = document.getElementById('starting_light');
    image.src = lights[index];
}
</script>

</body>
</html>

票数 2

Stack Overflow用户

发布于 2016-08-22 12:59:10

不能使用starting light作为id，您可以在这里读取更多信息，如注释Valid Naming for ID中所指出的。

还将index=更改为index++

您似乎也有一个错误，以及nextLightClick()函数中缺少的大括号。如果这有帮助的话请告诉我！

请确保所有图片都在同一个目录中正确命名！

票数 0

Stack Overflow用户

发布于 2016-08-22 12:59:16

在id (starting-light)中使用'_‘或'-’代替空格。
如果所有图像都在./ict traffic lights/文件夹中，那么将数组中的图像名更改为"./ict traffic lights/red.jpg", "./ict traffic lights/redamber.jpg"等。
在index = index ++;行之后删除额外的大括号，否则代码的if (index == lightsLen)...部分将保留在nextLightClick()函数之外。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39079907

复制

相似问题

问交通灯顺序灯不会变
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯顺序灯不会变EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问交通灯顺序灯不会变
EN