1つのボタン（html/js）を使用して2つの画像を切り替える方法

エラーがあることを認識しています（ブラウザでコードをプレビューしようとしましたが、ボタンが機能しません）。それを見つけて、できるだけコードをより効率的にしたいと思っています。1つのボタン（html/js）を使用して2つの画像を切り替える方法

<!DOCTYPE html> 
<html> 
<body> 

<h1>Mood Changer</h1> 

<button onclick="ChangeImage()">Change Mood</button> 

<img id="myImage" src="Images/sad.png" style="width:100px"> 

<script> 
    var index = 0; 
    var ImageList = newArray(1); 
    ImageList[0] = "Images/sad.png"; 
    ImageList[1] = "Images/smiley.png"; 
    
    function ChangeImage() 
    { 
    index = index + 1; 
     If (index ==ImageList.length) 
     { 
     index = 0; 
     } 
     var image1 = document.getElementById("myImage"); 
     image1.src = ImageList[index]; 
    } 
</script> 

</body> 
</html>

出典

2017-02-09 R.Cache

newArray(1); is not a function.

代わりにこれを試してみてください。

var ImageList = [];

これは、画像リストをプッシュする空の配列を作成します。

キーワード "if"はすべて小文字である必要があります。「If」を「if」に変更します。

出典

2017-02-09 21:56:21 Korgrue

あなたのコードはほとんど問題なく、私はリファクタリングしたエラーはごくわずかです。

var index = 0; 
 
var imageList = ['http://wallpaper-gallery.net/images/image/image-13.jpg', 'https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png']; 
 

 
function changeImage() { 
 
    index = index + 1; 
 
    if (index == imageList.length) { 
 
    index = 0; 
 
    } 
 
    var image1 = document.getElementById("myImage"); 
 
    image1.src = imageList[index]; 
 
}

<h1>Mood Changer</h1> 
 

 

 
<button onclick="changeImage()">Change Mood</button> 
 

 
<img id="myImage" src="http://wallpaper-gallery.net/images/image/image-13.jpg" style="width:100px">

出典

2017-02-09 21:56:31

いくつかの観察：

あなたしている配列構文は少しオフになっている、このようなものを検討：JavaScriptで

var ImageList = []; 
ImageList.push("Images/sad.png") 
ImageList.push("Images/smiley.png")

を、条件付きのキーワードは低くなっていますケース（Ifの代わりに）

代わりにインデックス=インデックス+ 1

のインデックス+ = 1 Difference between == and === in JavaScript

出典

2017-02-09 22:18:38 smeckydev

see this example below 

<html> 
<head> 
<script type="text/javascript"> 
function changeImage(element) { 
document.getElementById('imageReplace').src = element; 
} 
</script> 
</head> 
<body> 
<img src="" alt="Images" id="imageReplace"/><br /> 
<a href="#" onclick="changeImage('developervarun.png');">Link1</a> 
<a href="#" onclick="changeImage('himalayas.jpg');">Link2</a> 
</body> 
</html>

についての議論のために、このstackoverflowの質問をチェックアウトを検討

出典

2017-02-09 22:30:01 varunkumar

1つのボタン（html/js）を使用して2つの画像を切り替える方法

答えて

関連する問題