问如何在红绿灯序列上切换红绿灯？
EN

Stack Overflow用户

提问于 2017-01-26 23:37:03

回答 1查看 486关注 0票数 0

我正在尝试设置一个红绿灯序列，这样当我按下“改变红绿灯”按钮时，它就会在每次被按下时改变。然而，我已经使代码显示为红灯，但当我按下“更改灯”按钮时，它不会变成琥珀色和其他灯序列。

<!DOCTYPE html>
    <html>
    <body>
    <h1>Traffic Light</h1>

    <button type="button" onclick="changeLights"()>Change Lights </button>

    <script>

    var traffic_light = new Array(3)
    var traffic_lights = 0

    function lights(){
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_red.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_redAmb.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_green.jpg";
    traffic_light = new Image(500,800)
    traffic_light.src = "traffic_light_amber.jpg";
    }

    function changeLights() {
    document.traffic_light_images.src = traffic_light[traffic_lights].src
        traffic_lights++
        if(traffic_lights > 3) {
            traffic_lights = 0;
        }

    }
    </script>

    <img src = "traffic_light_red.jpg" name "traffic_light_images" height = "500" width = "800">

    </body>
    </html>

javascript

回答 1

Stack Overflow用户

发布于 2017-01-26 23:45:52

你把括号放在引号外面，=属性后面没有name -你看到它和其他的不一样了吗，并且不是有效的html？
你正在尝试选择一个在插入文档之前运行的带有JS的DOM节点(你的标签在图像上面执行)
- 你设置的宽度和高度没有单位，并且不推荐这样设置宽度和高度作为响应(只是建议，而不是错误)。在我的示例中，我只是让图像自然地适合，而不是specifying.
- You没有正确地将新项插入到数组中，而是将数组重新分配给一个新图像四次(使用push)

var traffic_light = [];
var traffic_lights = 1;

function initLights() {
    var image;

    image = new Image();
    image.src = "http://www.drivingtesttips.biz/images/traffic-light-red.jpg";

    traffic_light.push(image);

    image = new Image();
    image.src = "http://www.drivingtesttips.biz/images/traffic-lights-red-amber.jpg";

    traffic_light.push(image);

    image = new Image();
    image.src = "http://www.drivingtesttips.biz/images/traffic-lights-amber.jpg";
  
    traffic_light.push(image);
  
    image = new Image();
    image.src = "http://www.drivingtesttips.biz/images/traffic-lights-green.jpg";

    traffic_light.push(image);
}

function changeLights() {
    document.traffic_light_images.src = traffic_light[traffic_lights].src;
    traffic_lights++;
    if (traffic_lights > 3) {
        traffic_lights = 0;
    }
}

initLights();

<button type="button" onclick="changeLights()">Change Lights </button>
<img src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" name="traffic_light_images">

然而，不需要仅仅为了切换源代码而创建一个新的图像对象，并且可以简化您的代码：

const imageBasePath = 'http://www.drivingtesttips.biz/images/';
const traficLights = [
  'traffic-light-red.jpg',
  'traffic-lights-red-amber.jpg',
  'traffic-lights-amber.jpg',
  'traffic-lights-green.jpg',
];
const trafficLightImage = document.querySelector('.traffic-light-image');
let trafficLightIndex = 1;

function changeLights() {
    trafficLightImage.src = imageBasePath + traficLights[trafficLightIndex];
    trafficLightIndex++;
    if (trafficLightIndex === traficLights.length) {
        trafficLightIndex = 0;
    }
}

<button type="button" onclick="changeLights()">Change Lights</button>
<img src="http://www.drivingtesttips.biz/images/traffic-light-red.jpg" class="traffic-light-image" />

票数 1

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

原文链接：

https://stackoverflow.com/questions/41877138

复制

相似问题

问如何在红绿灯序列上切换红绿灯？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在红绿灯序列上切换红绿灯？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在红绿灯序列上切换红绿灯？
EN