Question

我正在尝试使用html和JavaScript创建交通灯模拟。我设法显示起始图像，但按钮不起作用。

Answer 1

只需要这个（你应该用互联网运行）

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

Answer 2

您不能将index=用作身份证明，您可以在评论in this SO question中找到更多内容。

同时将index++更改为nextLightClick()

你似乎也有一个拼写错误，以及StreamWriter函数中缺少花括号。如果这有帮助，请告诉我！

P.S确保所有图片都正确命名并放在同一目录中！

Answer 3

使用'_'或' - '代替id（./ict traffic lights/）中的空格。
如果所有图像都在"./ict traffic lights/red.jpg", "./ict traffic lights/redamber.jpg"文件夹中，则将阵列中的图像名称更改为index = index ++;等。
除if (index == lightsLen)...行之外，删除额外的大括号 nextLightClick()部分代码仍在<ion-view> <ion-content padding="true"> <div class="card"> <div class="item item-divider text-center"> Authentification </div> <div class="item item-text-wrap text-center"> <form> <div class="list"> <label class="item item-input"> <input type="text" placeholder="Nom d'utilisateur" ng-model="user.username"> </label> <label class="item item-input"> <input type="password" placeholder="mot de passe" ng-model="user.password"> </label> </div> </form> </div> <div class="item item-divider text-center"> <a href="" class="button button-positive button-small" ng-click="logIn(user)"> <i class="ionicons ion-android-share"></i> Identifiez moi, vite ! </a> <a href="" class="button button-energized button-small"> <i class="ionicons ion-android-mail"></i> Mot de passe perdu ! </a> </div> </div> <button class="button button-large button-full button-positive"> je n'ai pas de compte </button>函数之外。

交通灯序列灯不会改变

3 个答案: