Как переключить свет на последовательность светофора?

Я пытаюсь сделать последовательность светофора так, что когда я нажимаю кнопку «change lights», она должна меняться каждый раз, когда она была нажата. Тем не менее, я сделал код, появляющийся с красным светом, но когда я нажимаю кнопку «change lights», он не будет изменяться на янтарный и другой световой последовательности.Как переключить свет на последовательность светофора?

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

источник

2017-01-26 Samantha Ashamu

Ставит скобку вне кавычек onclick="changeLights"()
Вы не имеете = после атрибута name - вы видите, что это не то же самое, как и другие, а не действительный HTML?
Вы пытаетесь выбрать узел DOM с JS, который запускается до того, как он вставлен в документ (ваш тег скрипта выполняется над изображением)
Вы устанавливаете ширину и высоту без единицы и устанавливаете ширину и высоту как это не рекомендуется для реагирования (просто совет, а не ошибка). В моем примере я просто позволяю изображению естественно поместиться без указания.
Вы не правильно вставить новые элементы в массив, вместо того, чтобы вы переназначить массив к новому образу четыре раза (используйте 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" />

источник

2017-01-26 15:45:51

'Ваш массив начинается с 0, поэтому такая проверка должна быть traffic_lights> = 3' Это не должно быть'> 3'? –

Число приращений перед проверкой, действительные элементы находятся на '0,1,2' - на' 3' индекс уже выходит за пределы. Итак, на 'array [2]' then increment to '3' он должен быть сброшен до' 0' (в моем примере я добавил зеленый свет, поэтому он '> = 4') –

В коде OP также будет 4 элемента, если бы он правильно вставил элементы в массив. –

Как переключить свет на последовательность светофора?

ответ

Смежные вопросы