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

<!DOCTYPE html>
<html>
 <head>
  <script>

    var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
    var yellow = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png"
    var green = "https://s29.postimg.org/5ljr1ha3r/green.png"
    var lights=["red","yellow","green"]


    function changered()
    {
        var img = document.getElementById("light");
        img.src="lights[0]";
        return false;
    }

    function changeyellow()
    {
        var img = document.getElementById("light");
        img.src="lights[1]";
        return false;
    }

    function changegreen()
    {
        var img = document.getElementById("light");
        img.src="lights[2]";
        return false;
    }

  </script>

 </head>
 <body>
  <button id="red" onclick="setTimeout(changeyellow, 3000),setTimeout(changered, 6000),setTimeout(changegreen, 12000)">automatic</button>
  <button id="red" onclick="changered();">red</button>
  <button id="yellow" onclick="changeyellow();">yellow</button>
  <button id="green" onclick="changegreen();">green</button>
  <img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" />
  <br><br><br>

 </body>
</html>
1
kane pirankar 9 Янв 2017 в 22:27

3 ответа

Лучший ответ

В этом случае вы устанавливаете для атрибута src строку «lights [0]», а не значение в массиве в позиции 0.

Вместо этого:

var img = document.getElementById("light");
        //vvvvvvvvv   
img.src="lights[0]";
return false;

Вам нужно ссылаться на значения в вашем массиве. Так бы и стало:

img.src = lights[0];

Вам нужно будет делать это при каждом вызове функции. Также вам нужно сделать то же самое с вашим массивом, когда вы его инициализируете.

var lights = ["red","yellow","green"]

Должен стать:

var lights = [red, yellow, green] 
4
Cruiser 9 Янв 2017 в 19:36

Пожалуйста, удалите "" из элемента массива и lights[0]. Вот модифицированный код:

var lights=[red,yellow,green];    

function changered()
{
    var img = document.getElementById("light");
    img.src=lights[0];
    return false;
}

function changeyellow()
{
    var img = document.getElementById("light");
    img.src=lights[1];
    return false;
}

function changegreen()
{
    var img = document.getElementById("light");
    img.src=lights[2];
    return false;
}
0
Nisse Engström 1 Май 2017 в 20:07

Ваша главная проблема в том, что вы используете неправильные переменные, например, в массиве, если вы пишете:

lights = ["red","yellow","green"];

Значения вашего массива будут просто статическими строками с соответствующими значениями "red", "yellow" и "green".

Вам нужно изменить это на:

lights = [red,yellow,green];

Таким образом, ваш массив будет содержать URL-адреса.

То же самое относится и к src в вашем реальном коде:

img.src="lights[0]";

Вы просто устанавливаете статическую строку в src. Измените это на:

img.src= lights[0];
1
Nisse Engström 1 Май 2017 в 20:11