配列の値を取得、for、if、attrを使ってimgを出力をしたい

前提・実現したいこと

JavaScriptの配列を使った課題をしています。

①"1.png""2.png"...といったファイル名を番号順にした画像を用意
②配列の長さを指定して、それぞれに数字を代入する。
③代入された数字を使って、"[配列要素].png"という形で画像を作成する。
④ボタンを押すごとに画像が変わっていく。

という流れを作りたいです。

発生している問題・エラーメッセージ

array, for, attrを使っていますが、
それぞれの理解が不十分なため、どう組み立てていけばいいのか悩んでいます。

画像は"1.png""2.png""3.png""4.png""5.png""6.png"の６個を用意しています。

下記のコードでは、ボタンを押すと"6.png"の画像が表示され、途中の"2.png"~"5.png"が表示されません。
配列に一個ずつ要素を格納すれば組み立てることが出来たのですが、数が増えた場合にカウンターを使って処理をしたいです。

javascript
1var pic = new Array(
2    "1.png",
3    "2.png",
4    "3.png",
5    "4.png",
6    "5.png",
7    "6.png"
8);
9var no = 0;
10var le = pic.length;
11
12function f(){
13    if(no < le-1){
14        no++;
15        $("#a").attr("src",pic[no]);
16    }else{
17        alert("これ以上すすめません。");
18    }
19}

該当のソースコード

下記がうまく処理出来ていないコードです。

javascript
1var arr = new Array(6); //格納する場所を用意
2var no = 1;　　　　　　　　//変数を代入
3
4function f(){    
5    for(var i = 0; i < arr.length; i++){　//配列の長さまで処理を繰り返す
6    arr[i] = no;　　　　　　　　　　　　　　　//変数の値を格納
7    no++;　　　　　　　　　　　　　　　　　　　//変数の値を増やしていく
8    $("#a").attr("src",arr[i] + ".png");　//id=aの属性を変更
9　　}
10}

html
1<div>
2    <img id="a" src="1.png" alt="" />
3</div>
4<form method="post">
5	<input type="button" value="→すすむ" id="forward" onclick="f()">
6</form>

試したこと

配列に宣言する方法を試す。
alertやdocument.writeを使って、配列要素が一個ずつ取得できることを確認する。
if文も考えましたが、どこでどう分岐させたら良いのか分からずです。

補足情報（FW/ツールのバージョンなど）

勉強中のため、意図もしっかり伝えることが出来ていないかもしれませんが
何卒宜しくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

今回動作しない原因は
初期処理と毎回実行すべき処理の区別が明確でないことです。

f関数はボタンを押す度にピコピコ実行されるのに、
毎回arr配列を作成し直す必要がありますか？

これを混在してしまうと、
やるべきことに注力出来ずどっち付かずの散漫な結果に終わるのです。
やりたいことは常に1個にしぼりましょう。

回答をさっと書いてしまうとこうなります。

js
1var arr = new Array(6);
2for (var i = 0; i < arr.length; i++) {
3    arr[i] = (i + 1) + ".png";
4}
5var no = 0;
6
7function f(){
8    if(no < arr.length - 1){
9        no++;
10        $("#a").attr("src",pic[no]);
11    }else{
12        alert("これ以上すすめません。");
13    }
14}

配列に宣言する方法を試す。

alertやdocument.writeを使って、配列要素が一個ずつ取得できることを確認する。
if文も考えましたが、どこでどう分岐させたら良いのか分からずです。

console.logを覚えましょう。

ChromeやFirefox等のブラウザはF12キー(Macはcommand + option + i)でデベロッパーツールが起動します。
これを起動させ、Consoleタブをクリックします。

JavaScriptのコード内の好きな箇所でconsole.log(123)などと打ち込むと
このコンソール上に123という結果が表示されます。

js
1var arr = new Array(6); //格納する場所を用意
2var no = 1;　　　　　　　　//変数を代入
3
4function f(){
5    console.log("f関数実行！");
6    for(var i = 0; i < arr.length; i++){
7        console.log("i:", i); // 複数の引数に対応
8        arr[i] = no;
9        console.log("arr[i]:", arr[i]);
10        no++;
11        console.log("no:", no);
12        $("#a").attr("src",arr[i] + ".png");
13        console.log("src:", arr[i] + ".png");
14    }
15    console.log("f関数完了！");
16}