Как заставить работать мои светофоры?

-5

Я выполняю свою работу в JavaScript, и мне нужно создать светофор, который будет меняться каждый раз при нажатии кнопки. Я потратил много времени на это, и я все еще не могу заставить его работать. Может кто-то, пожалуйста, взгляните на меня и дайте мне несколько советов о том, как заставить его работать.Как заставить работать мои светофоры?

<!DOCTYPE html> 
    <html> 
    <body> 
     <img id="myImage" src="Light1.gif" width="500" height ="350"> 
     <p> 
     <button onclick="myFunction()">Change Light</button> 
     <p> 
     <p>Click Change Light to change the traffic light.</p> 
     <script> 
      var image = document.getElementById('myImage'); 
      var p1 = new Image(); 
      p1.src = "Light1.gif"; 

      var p2= new Image(); 
      p2.src = "Light2.gif"; 

      var p3 = new Image(); 
      p3.src = "Light3.gif"; 

      var p4 = new Image(); 
      p4.src = "Light4.gif"; 

      var imgArray = [p1,p2,p3,p4]; 
      var n = 0; 

      function myFunction(){ 
      n = n + 1; 
      if (n === imgArray.length) { 
       n = 0 
      } 
      image.src = imgArray[n]; 
      } 
     </script> 
     </body> 
    </html>

источник

2016-06-21 Stavia81

В чем проблема? – SLaks

* при каждом нажатии кнопки * ** или ** * при каждом нажатии кнопки *? – Spidey

Во-первых, в вашем коде есть синтаксические ошибки, которые необходимо проверить перед публикацией. линейный терминатор ; отсутствует на большинстве линий, и есть дополнительная скобка.

По этой проблеме вы создаете объекты типа Image, а затем сопоставляете их как источник исходного элемента изображения, который не будет работать. Вы можете просто создать массив текстовых значений (имена изображений), как указано ниже.

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <img id="myImage" src="Light1.gif" width="500" height="350"> 
 
    <p> 
 
    <button onclick="myFunction()">Change Light</button> 
 
    <p> 
 
     <p>Click Change Light to change the traffic light.</p> 
 
     <script> 
 
     var image = document.getElementById('myImage'); 
 
     var p1 = "Light1.gif"; 
 
     var p2 = "Light2.gif"; 
 
     var p3 = "Light3.gif"; 
 
     var p4 = "Light4.gif"; 
 
     var imgArray = [p1, p2, p3, p4]; 
 
     var n = 0; 
 

 
     function myFunction() { 
 
      n = n + 1; 
 
      if (n == imgArray.length) { 
 
      n = 0 
 
      }; 
 
      image.src = imgArray[n]; 
 
     } 
 
     </script> 
 
</body> 
 

 
</html>

Pro Tip: отступа кода для лучшей читаемости

источник

2016-06-21 19:55:52 Spidey

Я, наконец, получил его работу. Большое спасибо. Я потратил на это столько часов, и это, наконец, работает. Спасибо. – Stavia81

Проблема была с

var p1 = new Image() 
p1.src = "Light1.gif"

Все, что вам нужно, это

var p1 = "Light1.gif"

См. Мои CodePen.

Убедитесь, что запомнили вашу Точку с запятой в конце строк

источник

2016-06-21 19:57:55 RomanK

Как насчет ';'? – Spidey

@Spidey Я обновил свой ответ, спасибо. – RomanK

Если я вас правильно понял, я думаю, что вы пытаетесь сделать что-то, как показано ниже:

Исправление в коде:

удалить дополнительный закрывающая скобка }
Append .src image.src = imgArray [n] .src;

var image = document.getElementById('myImage'); 
 
var p1 = new Image() 
 
p1.src = "Light1.gif" 
 
var p2= new Image() 
 
p2.src = "Light2.gif" 
 
var p3 = new Image() 
 
p3.src = "Light3.gif" 
 
var p4 = new Image() 
 
p4.src = "Light4.gif" 
 
var imgArray = [p1,p2,p3,p4]; 
 
var n = 0; 
 
function myFunction(){ 
 
n = n + 1; 
 
if(n == imgArray.length){ 
 
n = 0}; 
 
image.src = imgArray[n].src; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<img id="myImage" src="Light1.gif" width="500" height ="350"> 
 
<p><button onclick="myFunction()">Change Light</button><p> 
 
<p> Click Change Light to change the traffic light. </p> 
 
</body> 
 
</html>

источник

2016-06-21 19:59:25 Rohit

Как сказал Паучок, вы картирование изображение объекта в ГКЗ другого изображения.

Вы также можете просто заменить линию внутри вашей петли с:

image.src = imageArray [п] .src;

источник

2016-06-21 20:01:39

Как заставить работать мои светофоры?

ответ

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