嘗試使用JavaScript中的數組更改圖像
[英]Trying to change an image using an array in JavaScript
問題描述
<!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文件都包含在同一文件夾中，並且尺寸都相同，任何想法為什么都不會改變圖像我目前正在猜測這與===或我正在使用單詞而不是數字的事實有關
3 個解決方案
解決方案1
1 已采納 2016-03-10 13:59:36
這里有很多錯誤：
- 圍繞
if語句的括號 - 關閉html標簽后關閉body標簽
-
document.getElementById無法獲得與img ID相同的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>
解決方案2
0 2016-03-10 14:10:48
這是更改圖像的最簡單方法。
只需將圖像源設置為陣列中的下一個圖像。 您需要使用mod運算符從頭開始循環。 回到開始。
數組-索引指針
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();
<img id="Light" width="150" height="150"> <br /> <button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
地圖-鏈接指針
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();
<img id="Light" width="150" height="150"> <br /> <button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
類-循環迭代器
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.
<img id="Light" width="150" height="150"> <br /> <button type="button" onclick="changeImage()">Click me to change the light in the sequence!</button>
解決方案3
0 2016-03-10 14:13:17
您的代碼中幾乎沒有小錯誤。 圖片的id為myImage ，但您寫的是var image = document.getElementById('Light'); 結果undefined 。 如PierreDuc所述，您錯過了if條件的括號。
看一下這個例子： https : //jsfiddle.net/1wjn943x/
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];
});
JavaScript嘗試更改圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.