Question

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

Total Days = 31
Total Days except Sundays = 26

Answer 1

您将括号括在引号onclick="changeLights"()
=属性之后没有name - 您是否认为它与其他属性不同且无效的HTML？
您正在尝试选择一个带有JS的DOM节点，该节点在插入文档之前运行（您的脚本标记在图像上方执行）
您在没有单位的情况下设置宽度和高度，并且不建议像响应那样设置宽度和高度（仅建议，而不是错误）。在我的例子中，我只是让图像自然适合而不指定。
您没有正确地将新项目插入数组，而是将阵列重新分配给新图像四次（使用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 个答案: