読者です 読者をやめる 読者になる 読者になる

JavaScriptの配列

JavaScript関連

<!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が0の場合

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];
}

が実行されるということになるようです。

広告を非表示にする