詳しい人求む！

javascript ループがうごかない

解決済

質問者：わちょん
質問日時：2021/10/25 16:19
回答数：2件

javascriptでわからないです

ｈｔｍｌ

<body>
<br>
<a id="btn--orange" class="btn btn--orange">テストを始める</a>

<div id = "gazoud" class = "gazous">
<h3>画像をセットで覚えてください</h3>
<img id="mypic" src="imgo/apple.jpg" width="380" height="320">
<img id="mypict" src="imgh/farm.jpg" width="380" height="320"><br><br>
</div>

<div id = "fitd"class = "fits">
<td>物と背景の2つの画像の相性は？</td><br><br>

<input type="range" id="example" min="1" max="5" step="1">

<p>2つのペア画像の相性は<span id="current-value"></span>。</p>
</div>
<script src="js/gazou.js"></script>
</body>
</html>

JavaScript

const pics_srcA = [
"apple.jpg",
"banana.jpg",
"grape.jpg",
],
IMG = document.getElementById("mypic");

const pics_srcB = [
"farm.jpg",
"forest.jpg",
"park.jpg",
],
IMG = document.getElementById("mypict");

const x = document.getElementById(`btn--orange`);
let pa = document.getElementById('gazoud');
let pi = document.getElementById('fitd');

pa.style.display = 'none';
pi.style.display = 'none';

x.addEventListener(`click`, func = () => {
x.style.display = 'none';
function loop2(flag){
let timer; // 待ち時間の変数
if(flag === 0){
pi.style.display = 'none';　　　//非表示にする
pa.style.display = 'block'; //表示する
timer = 3500;　　　　　　　　//3.５秒
flag = 1;
}else{
pa.style.display = 'none';
pi.style.display = 'block';
timer = 6000;
flag = 0;
}
window.setTimeout(function(){
loop2(flag);
},timer);
};
});

divでまとめたやつを変数pa pi にして、表示したり非表示にさせたりしたいのですが動かないです
divのidとclassは一緒にしてます(これがいいのか悪いのかわからない...けど反応はする)
ボタンを押したらループを開始したいです

ループはまだサンプル画像が3枚づつしかないので3回だけにしたいです

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sukitaro
回答日時：2021/10/25 18:00

おそらく、この質問の続きですよね。

https://oshiete.goo.ne.jp/qa/12633650.html

いろいろやってみたいという情熱があるのだと思いますが、
ひとつずつやっていかないと、頭の中がぐちゃぐちゃになると思います。
（わたしも、よく何をしているのか分からなくなります。）

まずは、ループで表示・非表示をきちんと整理してみては。
たぶんですが、以下のような感じではないかと思います。

定数や変数、関数の名前付けは、
自分が分かりやすいようにしていくと良いと思います。

<section id="start-section" style="background-color:#5d5;">
<p>スタート・セクション</p>
<p><a id="start-btn" class="btn btn--orange" href="#">テストを始める</a></p>
</section>

<section id="image-section" style="background-color:#d55;">
<p>画像・セクション（3.5秒）</p>
</section>

<section id="input-section" style="background-color:#55d;">
<p>インプット・セクション（6秒）</p>
</section>

<script>
/* 各セクションをget */
const StartSection = document.getElementById('start-section');
const ImageSection = document.getElementById('image-section');
const InputSection = document.getElementById('input-section');

/* スタート・ボタンをget */
const StartBtn = document.getElementById('start-btn');

/* 最初に実行する関数 */
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のときはインプット・セクションが表示。
*/
function loopSection(loopFlag) {
let timer; // 待ち時間の変数
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;
}
window.setTimeout(function () {
loopSection(loopFlag);
}, timer);
};

/* init関数を実行 */
init();

</script>

ループ回数を3回までにするなら、
loopCount みたいな名前の変数を別途用意し、
インプット・セクションが表示されるごとに
1ずつ増やしていき、3回目になったところで
loopSection() 関数を止めるようにすると良いと思います。