- 締切済み
スライドショーの再生ボタンがうまくいきません
https://okwave.jp/qa/q9320398.html の続き スライドショーの再生ボタンがうまくいきません 一度止めてから再度再生を押しても再生が再開されません。 何度も恐縮ですが理由がわかりますか? var it; let iterative = ()=> { it = setTimeout(myChange , 5000); } iterative(); let stoppingNow; const pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', ()=> { clearTimeout(it); let stoppingNow = true; }); const playBtn = document.getElementById('js-play-btn'); if(stoppingNow === true) { playBtn.addEventListener('click', ()=> { iterative(); stoppingNow = false; });
- みんなの回答 (10)
- 専門家の回答
みんなの回答
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
- amanojaku1
- ベストアンサー率54% (265/488)
- doraneko66
- ベストアンサー率11% (535/4742)
- doraneko66
- ベストアンサー率11% (535/4742)
- doraneko66
- ベストアンサー率11% (535/4742)
- doraneko66
- ベストアンサー率11% (535/4742)
関連するQ&A
- アロー関数で変数に入れて名前のある関数にする
JSでsetTimeoutでのスライドショーの停止、再生がうまくいきません。 http://codepen.io/anon/pen/RVNgLr 問題なく動いているので、停止再生の部分以外は間違えがないと思うのですが、 停止再生の部分に問題はありますでしょうか? 抜粋しておきました。 let iterative = ()=> { setTimeout(myChange , 5000); // } const pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); 停止は下記でできるがこれですと名前のある関数にできないので再度動かすことができないのです。 let iterative = { setTimeout(myChange , 5000); // } pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); const playBtn = document.getElementById('js-play-btn'); playBtn.addEventListener('click', ()=> { iterative(); }); pauseBtn.addEventListener('click', ()=> { clearTimeout(iterative); }); iterative();はiterativeという名前の関数を作らないと実行できないので、停止できない理由はわかっているのですが、アロー関数で変数に入れて名前のある関数にすることができないのでどうすれば両方とも実現できるのかわかりません。
- 締切済み
- JavaScript
- グローバル変数以外も変数は残り続ける?
https://okwave.jp/qa/q9323518.html の続き var stoppingNow = false; がグローバル変数になっていないので仕様上はページ読み込み時に実行されて処理が終わった瞬間に この変数は削除されて使えなくなると聞いたのですが、 なぜかpauseBtnを押した後に、playBtnを押すと問題なく使えてしまいます。 グローバルにない変数は、stoppingNow = true;を実行してもそんな変数もうないとなるはずなのですよね? それともグローバルにない変数も残っていて、代入の処理よりも上、ないしは親のスコープにあれば使えるのが仕様なのですか? (function () { var stoppingNow = false; var pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', function () { clearTimeout(it); stoppingNow = true; }); var playBtn = document.getElementById('js-play-btn'); playBtn.addEventListener('click', function () { if (stoppingNow === true) { iterative(); stoppingNow = false; } }); } myChange(); })();
- 締切済み
- JavaScript
- 他の関数内にあるsetinertvalを参照できな
clearInterval(timer0);が他の関数内にあるsetinertvalを参照できない。 エラーになってしまいます。 let startSlot = (()=> { let timer0 = setInterval(() => { 内容 }, interval); })(); // stopSlot let stopSlot = (()=> { const stop0 = document.getElementById('stop0'); const stop1 = document.getElementById('stop1'); stop0.addEventListener('click', ()=> { clearInterval(timer0); }); })(); 勝手にカプセル化してしまう スコープの問題に非常に悩むのですがどう対処しますか? let iterative = { setTimeout(myChange , 5000); // } とした場合ちゃんと止まっていますのでスライドショーに問題はないです 停止は上記でできるがこれですと名前のある関数にできないので再度動かすことができないのです。 var playBtn = document.getElementById('js-play-btn'); playBtn.addEventListener('click', function () { _iterative(); }); が変数に代入しただけではできないですよね – よい回答を頂けないので、いろいろな所で聞いています。
- ベストアンサー
- JavaScript
- 他の関数内にあるsetinertvalを参照できな
clearInterval(timer0);が他の関数内にあるsetinertvalを参照できない。 エラーになってしまいます。 let startSlot = (()=> { let timer0 = setInterval(() => { 内容 }, interval); })(); // stopSlot let stopSlot = (()=> { const stop0 = document.getElementById('stop0'); const stop1 = document.getElementById('stop1'); stop0.addEventListener('click', ()=> { clearInterval(timer0); }); })(); 勝手にカプセル化してしまう スコープの問題に非常に悩むのですがどう対処しますか? よい回答を頂けないので、いろいろな所で聞いています。
- 締切済み
- JavaScript
- FLASH/一定時間停止後、再生されるscript
flash CS4/ActionScript3.0にてサイトローテーションバナーを制作しております。 ムービークリップ「btn1_mc」をクリックするとフラッグ「scene1」を再生し、 「btn1_mc」にポインタが乗った時は一定時間停止し、再生されるという動きを作りたいのですが、初心者のため、うまくActionScriptが書けません。 setTimeout関数を使えば良いということはわかったのですが… 下記コードに書き加え、実装する方法を教えていただければ助かります。 よろしくお願いします。 btn1_mc.addEventListener(MouseEvent.CLICK,btn1Click); btn1_mc.addEventListener(MouseEvent.ROLL_OVER,btn1Over); btn1_mc.addEventListener(MouseEvent.ROLL_OUT,btn1Out); btn1_mc.buttonMode=true; function btn1Click(evt:MouseEvent):void{ gotoAndPlay("scene1"); } function btn1Over(evt:MouseEvent):void{ gotoAndStop("scene1"); btn1_mc.gotoAndStop(2); } function btn1Out(evt:MouseEvent):void{ gotoAndPlay("60"); btn1_mc.gotoAndStop(1); }
- 締切済み
- デザイナー・クリエイティブ職
- iがクリックごとに増えるようにしたい
二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません var firstClick = true; const startBtn = document.getElementById('js'); startBtn.addEventListener('click', ()=> { if(firstClick) { var i = 0; firstClick = false; } ~ stageNumDefault の二度目クリック時に数値が増えていかずNaNになってしまいます。 https://codepen.io/anon/pen/VbPpby に再現しておきました。
- ベストアンサー
- JavaScript
- iがクリックごとに増えるようにしたい
二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません var firstClick = true; const startBtn = document.getElementById('js'); startBtn.addEventListener('click', ()=> { if(firstClick) { var i = 0; var firstClick = false; } ~ var firstClick = true;をグローバルに移動してみましたが今度はなぜかundefinedになってしまいます。 なぜイベントリスナー外に出すとundefinedになってしまうのでしょうか? trueを0にしてもやはりundefinedになってしまいます。 またiは繰り返し増えていく数値全般に使うので、同じ変数名が多用されてどうしても被ってしまうのですが、現場ではどう対処しますか? cssだとbemを使って対処しますが。 jsでもtimerI,timer-iなどにするのでしょうか?
- 締切済み
- JavaScript
- javascriptであるボタンを押すと他のボタンの表記が変わるというプログラムをつくりたいのですが。
モと表示された1個のボタンと穴と表示された2個のボタンを用意する。モのボタンをクリックするとそのボタンの法事は穴に変わり、残り2つの穴のどれかがモに変わる。穴のボタンをクリックされても何も変わらないプログラムをつくりたいのです。 最初の状態からモをクリックして他のボタンを変化させることはなんとかできたのですが、そのあと移動したモをおしても同じことをできるようにするのができなくて困ってます。 あと、できたらモを押して2つの穴のどちらかがモにかわるとき穴からモにかわるボタンは左側のもの、とかは決まってないでランダムだとうれしいです>< おねがいします!!! 全然違うかもしれませんが、つくってみたのものっけておきます <html> <head> <title></title> <script type="text/javascript"> var moFlg = true; function func(){ if (moFlg) { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "モ"; document.getElementById("btn03").innerHTML = "穴"; moFlg = !moFlg; } else { document.getElementById("btn01").innerHTML = "穴"; document.getElementById("btn02").innerHTML = "穴"; document.getElementById("btn03").innerHTML = "モ"; moFlg = !moFlg; } } </script> </head> <body> <button id="btn01" type="button" " onClick="func()"> モ </button> <button id="btn02" type="button" " onClick=""> 穴 </button> <button id="btn03" type="button" " onClick=""> 穴 </button> </body> </html> ここまでです。 でもできたら<input type ~ button ~ onClick>とかがつかわれているとうれしいです。
- ベストアンサー
- JavaScript
- iPhoneのsafariにて読込出来ない
iPhoneの一部のアプリのURLコピーにて読込出来ないものがある。 IE、Android、iPhoneのクリップボード読込可能ですが、iPhoneの一部のアプリのURLコピーが読込出来ない。どうすれば良いでしょうか? <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" charset="utf-8"> </head> <body> <button type="button" id="btn">Read</button> <script type="text/javascript"> document.getElementById('btn').addEventListener('click', async () => { const text = await navigator.clipboard.readText(); alert(text); }); </script> </body> </html>
- 締切済み
- JavaScript
- クリックして画像を表示JavaScriptについて
友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか?教えて頂きたく思います。
- ベストアンサー
- JavaScript
お礼
やっぱり、グローバル以外でページ読み込み後、変数が消えずに残り続けるのは、仕様上おかしいのですね。 >>>> >playBtn.addEventListener('click', ()=> { >iterative(); >stoppingNow = false; >alert("playBtn:stoppingNow = "+stoppingNow); >}); 上記はクリックしたときにだけ実行されるのでページの読み込み時は何のかかわりもないと思っていたのですが、確かに登録する作業なので、 読み込み時にifがfalseなことによって実行されないと登録されないので、 その後クリックしても登録されていないものは決して実行されないので、 いくらクリックしても何も実行されないという事なのですね。 上記の認識は正しいのですね。