詳しい人求む！

javascrip 切り替えのやり方

解決済

質問者：わちょん
質問日時：2021/10/20 17:59
回答数：1件

下のhtmlがあるとき
テストを始めるボタンを押したらボタンが消えて→２つの画像が表示→画像が消えて→スライダー(range)を動かす画面を表示→新しい2つの画像を表示→画像が消えて→スライダー.....をループさせるようにするにはどうすればいいですか

注意☆画像はまだサンプルの2枚しか追加してないです

教えてほしいjavascriptは消し方と出し方と時間経過と1連の動作をループ仕方
調べたらsetInterval ()使うてかいてたけどあまりわからなかった

<!DOCTYPE html lang="ja">
<head>
<meta charset="UTF-8">
<title>練習プログラム</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<script src="js/gazou.js"></script>

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

<h3>画像のペアをセットで覚えて　(３秒間表示)</h3>

<head>
<img id="mypic" src="imgleft/apple.jpg" width="380" height="320">
<img id="mypict" src="imgright/farm.jpg" width="380" height="320"><br><br>

<td>左と右の2つの画像の相性はどれくらい良い？(6秒間表示)</td><br><br>

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

<p>2つのペア画像のフィットは<span id="current-value"></span>。</p>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： sukitaro
回答日時：2021/10/20 20:40

>教えてほしいjavascriptは消し方と出し方と時間経過と1連の動作をループ仕方

まず、htmlの要素の表示を消したり出したりする方法ですが、
たとえばhtmlで、
<p id="p-id">aaa</p>
みたいな要素があったとすると、

JavaScriptでは、
let pa = document.getElementById('p-id');
で変数paに要素を代入して、
pa.style.display = 'none';
とすれば、
cssで、display:none; としたときと同じように
表示が消えます。

その後、表示させたいタイミングで、
pa.style.display = 'block';とすればブロック要素で表示されます。

なのでhtml側で、同時に表示したり消したりしたいものを
<div>要素や<section>要素などでまとめておいて、
それにidを付け、
それをJavaScriptで操作するのが良いと思います。

＝＝＝

次に、一定の経過時間でループさせる方法ですが、
関数を再帰させるようにすると良いと思います。

function loop(){
console.log('何かの処理');
window.setTimeout(function(){
loop()
},3000);
};

とすれば、loop();を最初の一回実行すると、
3000ミリ秒後にまたloop()関数が呼び出され、
さらにその3000ミリ秒後にloop()関数が呼び出され、
・・・
と、ずっとloop()関数を実行し続けます。

これを発展させれば、

function loop2(flag){
let timer; // 待ち時間の変数
if(flag === 0){
console.log('3秒待つときの処理');
timer = 3000;
flag = 1;
}else{
console.log('6秒待つときの処理');
timer = 6000;
flag = 0;
}
window.setTimeout(function(){
loop2(flag);
},timer);
};

とすれば、
loop2(0);を実行したとき、
まずflagが0なので、3秒の処理が実行され、
その3秒後にloop2(1)が呼び出され、
flagが0でないので、6秒の処理が実行され、
その6秒後にloop2(0)が呼び出され、
・・・
と、3秒と6秒の処理を、交互にできると思います。

再帰は、書いているときはエラーがたくさん出てくると思いますが、
やっていること自体は難しいことではないので、
慣れればプログラミングの効率が良くなると思います。