ループカウントが増えてくにつれてImagesectionにある画像2つ(pics_srcAとpics_srcB)を配列通りに変更したいです!
例 ループカウント0の時→画像リンゴ ファーム
1の時→画像ばなな フォレスト
2の時→画像ぶどう こうえん
3の時→終了(非表示にしてる)
分からないことは画像の配列pics_srcA.Bをループ処理のどこで使うかと
カウントが増えてくたびに画像を変更する処理をどうすればいいかです
HTML----------------
<body>
<br>
<section id="start-section" style="background-color:#5d5;">
<a id="start-btn" class="btn btn--orange" href="#">テストを始める</a>
</section>
<link rel="stylesheet" href="style.css">
<section id="image-section" style="background-color:rgb(42, 201, 103);">
<h1>画像をセットで覚えてください(3秒)</h1>
<img id="mypicA" src="imgo/apple.jpg" width="380" height="320">
<img id="mypicB" src="imgh/farm.jpg" width="380" height="320"><br><br>
</section>
<section id="input-section">
<tb class ="inputa">オブジェクトと背景の2つの画像はフィットしますか?(6秒)</tb><br><br>
<input type="range" class = "inputb" id="example" min="1" max="5" step="1">
<p class = "inputc">とても悪い ちょっと悪い 普通 ちょっと良い とても良い<!--<span id="current-value"></span>-->。</p>
</section>
<script src="js/gazou.js"></script>
<link rel="stylesheet" href="style.css">
</body>
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();
No.2ベストアンサー
- 回答日時:
そもそも、HTMLを一度勉強した方が良いかもしれません。
1)
<link rel="stylesheet" href="style.css">
は、<head>タグ内に一度書けばOKです。
2)
style.cssを作っているなら、<br>で見た目を調整するのではなく、
block要素にして、marginとpaddingで調整した方が良いです。
3)
<td>タグの使い方が変です。
===
いまの状態だと、ループは止まっておらず、
表示されていないだけなので、
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操作を覚えないといけないので、
大変だと思いますが、頑張ってください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
クリックで色変更後に既に変更...
-
読み込んだQRコードをフォーム...
-
jQueryのアコーディオンメニュ...
-
jQueryでクリックされた要素のi...
-
removeEventListenerについて
-
removeAttribute()メソッドで削...
-
折りたたみ式JavaScriptをcheck...
-
jQueryで同じid属性が複数あっ...
-
401エラードキュメントを401.ht...
-
前回の質問の続き
-
折りたたみ部分にアンカーでリ...
-
iframe内のリンクが飛ばないの...
-
ネストされたハッシュの値から...
-
テキストエリア内の一部の文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報