<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列・画像入れ替え(授業回答)</title>
</head>
<body>
<h1>番号を入力すると画像が変わります。</h1>
<form name="form1">
数字：<input type="text" placeholder="1～4までの値" name="num" size="30">
表示：<input type="button" value="表示" onclick="showImg();">
</form>
<img src="" alt="" name="images">
<script>
var imgArray = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
function showImg(){
var i = document.form1.num.value-1;
document.images.src = "image/" + imgArray[i];
}
</script>
</body>
</html>
form( name="form1" ),input( name="num" ),img( name="images" )タグにname属性をつけるのはjavascriptと紐付けしたいかららしいっす。
document.form1.num.valueはname="num"のinput type="text" のtextに入力された値=value。
document.images.srcはname="images"のimg src=""の""の中に入る値のことで、ここでは
"image/"+imgArray[i]ということになるようで、
imgArray[i]は配列imgArrayのi番目の値、iはdocument.form1.num.value-1なので、
name="num"のinput type="text" のtextに入力された値(ブラウザ上では、数字：の横の入力エリアに
入力された数字から1を引いたもの。)
["0番目","1番目","2番目","3番目",・・・"i番目"]
今回は配列の中身が5個なので、0<=i<=4になります。配列は0番スタートという理由から。
iが０の場合
imgArray[0]==1.jpg
↓
document.images.src="images/"+imgArray[0]
↓
document.images.src="images/"+1.jpg
↓
<img src="document.images.src" alt="" name="images">
↓
<img src="images/1.jpg" alt="" name="images">でimagesフォルダの中の1.jpgの中の画像を表示
というのが、name="num"のinput type="text"の中に数字が入力された状態で、
value="表示"のinput type="button"がクリックされた時、onclick="showImg();"で下記の
function showImg(){
var i = document.form1.num.value-1;
document.images.src = "image/" + imgArray[i];
}
が実行されるということになるようです。
