Question

<!DOCTYPE html> 
<html>
<body>
<img id="myImage" src="Red.jpg" width="209" height="241">
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
<script> 
index=(0)
var traffic = ["Red","Rambo","Green","Yellow"]
function changeImage() {
    var image = document.getElementById('Light');
    if traffic[index] === "Red" {
        image.src = "Rambo.jpg";
        index= (index+1)
    } else if traffic[index] === "Rambo" {
        image.src = "Green.jpg";
         index= (index+1)
    } else if traffic[index] === "Green" {
        image.src = "Yellow.jpg";
        index= (index+1)
    } else {
        image.src = "Red.jpg";
        index=0
    }
}
</script>
</html>
</body>

这是我的代码我不明白为什么当我点击按钮时图像没有改变图像都是.jpg文件都包含在同一个文件夹中并且所有都是相同大小任何想法为什么不会改变我目前正在猜测的图像与===有关，或者我正在使用单词代替数字

Answer 1

这里出了很多问题：

围绕if陈述
关闭html标签后关闭正文标记
document.getElementById与img id

所以，这样可行，但是首先检查javascript和HTML语法可能是一个好的开始：

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="Red.jpg" width="209" height="241">
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
<script>
    var index = 0;
    var traffic = ["Red","Rambo","Green","Yellow"];
    var image = document.getElementById('myImage');

    function changeImage() {
        if (traffic[index] === "Red") {
            image.src = "Rambo.jpg";
            index++;
        } else if (traffic[index] === "Rambo") {
            image.src = "Green.jpg";
            index++;
        } else if (traffic[index] === "Green") {
            image.src = "Yellow.jpg";
            index++;
        } else {
            image.src = "Red.jpg";
            index = 0;
        }
    }
</script>

</body>
</html>

Answer 2

这是更改图像的最简单方法。

只需将图像源设置为阵列中的下一个图像即可。你需要使用mod运算符从最后循环;回到开头。

数组 - 索引指针

＆＃13;

var imageEl = document.getElementById('Light');
var index = 0;
var images = [
  "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
  "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
  "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
  "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow"
];

function changeImage() {
  imageEl.src = images[index++ % images.length]; // Set and increment the image index.
}

changeImage();

＆＃13;

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

＆＃13;

地图 - 链接指针

＆＃13;

var imageEl = document.getElementById('Light');
var currImage = '';
var images = {
  red : {
    src : "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
    next : 'rambo'
  },
  rambo : {
    src : "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
    next : 'green'
  },
  green : {
    src : "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
    next : 'yellow'
  },
  yellow : {
    src : "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow",
    next : 'red'
  }
};

function changeImage() {
  (function(img) {
    imageEl.src = img.src; // Set the image source to the current image.
    currImage = img.next;  // Set current image as the next image.
  }(images[currImage || 'red']));
}

changeImage();

＆＃13;

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

＆＃13;

类 - 循环迭代器

＆＃13;

var CircularIterator = function(iterable) {
  this.iterable = iterable || [];
  this.index = 0;
  this.get = function(index) {
    return this.iterable[index] || this.next();
  };
  this.size = function() {
    return this.iterable.length;
  };
  this.incr = function() {
    return this.index = ((this.index + 1) % this.size());
  };
  this.next = function() {
    return this.get(this.incr());
  };
  this.first = function() {
    return this.get(0);
  };
  this.last = function() {
    return this.get(this.size() - 1);
  };
};

var imageEl = document.getElementById('Light');
var iterable = new CircularIterator([
  "http://placehold.it/150x150/FF0000/FFFFFF.jpg?text=Red",
  "http://placehold.it/150x150/0000FF/FFFFFF.jpg?text=Rambo",
  "http://placehold.it/150x150/00FF00/FFFFFF.jpg?text=Green",
  "http://placehold.it/150x150/FFFF00/FFFFFF.jpg?text=Yellow"
]);

function changeImage() {
  imageEl.src = iterable.next(); // Set and increment the image index.
}

imageEl.src = iterable.first();  // Set the current image to the first.

＆＃13;

<img id="Light" width="150" height="150">
<br />
<button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>

＆＃13;

Answer 3

您的代码中几乎没有错误。您的图片id为myImage，但您在var image = document.getElementById('Light');上写了undefined，结果为var images = [ "http://openphoto.net/thumbs2/volumes/mylenebressan/20120720/openphotonet_11.jpg", "http://openphoto.net/thumbs2/volumes/sarabbit/20120322/openphotonet_DSCF5890.JPG", "http://openphoto.net/thumbs2/volumes/Sarabbit/20120117/openphotonet_gerberadaisy3.jpg" ]; var index = 0; var img = document.getElementById("myImage"); document.getElementById("button").addEventListener('click', function() { // Next image. index = (index + 1) % images.length; // Setting `src`attribute of <img>. img.src = images[index]; });。正如PierreDuc所提到的那样，如果条件允许，你会错过括号。

看一下这个例子：https://jsfiddle.net/1wjn943x/

Map[String, Class[GenericTrait]]

尝试使用JavaScript中的数组更改图像

3 个答案:

数组 - 索引指针

地图 - 链接指针

类 - 循环迭代器