javascript ループ中の処理

Question

ループカウントが増えてくにつれてImagesectionにある画像２つ(pics_srcAとpics_srcB)を配列通りに変更したいです！例　ループカウント０の時→画像リンゴ　ファーム　　　　　　　　　１の時→画像ばなな　フォレスト　　　　　　　　　２の時→画像ぶどう　こうえん　　　　　　　　　３の時→終了(非表示にしてる) 分からないことは画像の配列pics_srcA.Bをループ処理のどこで使うかと　　　　　　　　カウントが増えてくたびに画像を変更する処理をどうすればいいかです HTML----------------

テストを始める

画像をセットで覚えてください(3秒)

オブジェクトと背景の2つの画像はフィットしますか？(6秒)

とても悪い　　ちょっと悪い　　　　普通　　　　ちょっと良い　　とても良い。

Javascript----------------- const StartBtn = document.getElementById(`start-btn`); const StartSection = document.getElementById(`start-section`); const ImageSection = document.getElementById('image-section'); const InputSection = document.getElementById('input-section'); const pics_srcA = [ "apple.jpg", "banana.jpg", "grape.jpg", ], IMGA = document.getElementById("mypicA"); const pics_srcB = [ "farm.jpg", "forest.jpg", "park.jpg", ], IMGB = document.getElementById("mypicB"); let numA = 0; let numB = 0; function init() { ImageSection.style.display = 'none'; InputSection.style.display = 'none'; /* スタート・ボタンにクリックイベントを追加 */ StartBtn.addEventListener(`click`, function () { /* スタート・セクションを消して * ループ関数をloopFlag=0で実行 */ StartSection.style.display = 'none'; loopSection(0); }, false); } /* 画像セクションとインプットセクションを交互に表示する関数 * 引数 loopFlag は、0か1。 * 0のときは画像・セクションが表示。 * 1のときはインプット・セクションが表示。 */ let loopCount = 0; //ループをカウントする function loopSection(loopFlag) { let timer; // 待ち時間の変数 if (loopCount === 3){ //3回目でループ終了 ImageSection.style.display = 'none'; InputSection.style.display = 'none'; } else if (loopFlag === 0) { ImageSection.style.display = 'block'; InputSection.style.display = 'none'; timer = 3500; loopFlag = 1; } else { ImageSection.style.display = 'none'; InputSection.style.display = 'block'; timer = 6000; loopFlag = 0; loopCount = (loopCount + 1); } window.setTimeout(function () { loopSection(loopFlag); }, timer); }; /* init関数を実行 */ init();

sukitaro · Accepted Answer

そもそも、HTMLを一度勉強した方が良いかもしれません。 1) は、タグ内に一度書けばOKです。 2) style.cssを作っているなら、
で見た目を調整するのではなく、 block要素にして、marginとpaddingで調整した方が良いです。 3) タグの使い方が変です。＝＝＝いまの状態だと、ループは止まっておらず、表示されていないだけなので、 loopSection()関数の条件分岐のところは、 if (loopCount === 3){ ImageSection.style.display = 'none'; InputSection.style.display = 'none'; return; } みたいに、returnで終わらせてください。＝＝＝ >画像の配列pics_srcA.Bをループ処理のどこで使うか >カウントが増えてくたびに画像を変更する処理をどうすればいいかイメージタグの使い方は、たとえば、 IMGA.src = './imgo/apple.jpg'; みたいにします。なので、 IMGA.src = './imgo/' + pics_srcA[loopCount]; みたいになれば、良いはずです。処理のタイミングによっては、 pics_srcA[loopCount - 1]; とか、 pics_srcA[loopCount + 1]; になることもあるかもしれません。＝＝＝処理のタイミングは、 imageセクションが消えてから、 ImageSection.style.display = 'none'; 次のimageセクションが表示されるまで ImageSection.style.display = 'block; の間だったら、いつでも良いです。 if文を読み解きながら、いつのタイミングがちょうど良いか調整してみてください。＝＝＝ JavaScriptは、条件分岐や反復の方法を覚えながら、同時にHTMLやDOM操作を覚えないといけないので、大変だと思いますが、頑張ってください。

javascript ループ中の処理

そもそも、HTMLを一度勉強した方が良いかもしれません。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング