• 締切済み

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などにするのでしょうか？

みんなの回答

  • Gotthold
  • ベストアンサー率47% (396/832)
回答No.1

> var firstClick = false; ここでvarでローカル変数firstClickを宣言しているので、 この関数内ではグローバル変数firstClickにはアクセスできずローカル変数firstClickが使われます。 （var宣言は巻き上げ処理されるので、関数内のどこで宣言しても関数先頭で宣言したのと同じ扱いです。） > if(firstClick) { の時点ではローカル変数firstClickには何も代入されていないのでundefinedになります。 > またiは繰り返し増えていく数値全般に使うので、 > 同じ変数名が多用されてどうしても被ってしまうのですが、現場ではどう対処しますか？ このiの使い方はおかしいです。 iのような短い変数名は、forループのループ階数をカウントする変数のように 使われる範囲が狭くて短い変数名でも用途がすぐに理解できるような所に使います。 クリックするたびに増えるようなプログラムの広範囲で利用する 状態を管理するような変数ならちゃんと意味のある名前を付けてください。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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 に再現しておきました。

  • スライドショーの再生ボタンがうまくいきません

    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; });

  • 他の関数内にある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(); }); が変数に代入しただけではできないですよね – よい回答を頂けないので、いろいろな所で聞いています。

  • グローバル変数以外も変数は残り続ける？

    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(); })();

  • 他の関数内にある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); }); })(); 勝手にカプセル化してしまう スコープの問題に非常に悩むのですがどう対処しますか？ よい回答を頂けないので、いろいろな所で聞いています。

  • addEventListenerで

    window.addEventListener("load", addEvents, false); function addEvents() { 　for (var i = 0; i < 3; i++) { 　　document.getElementById("hoge" + i).addEventListener("click", function() { check(i) }, false); 　} } ---- というコードで、イベントを追加したのですが hoge0をクリック -> check(3)を呼び出し hoge1をクリック -> check(3)を呼び出し hoge2をクリック -> check(3)を呼び出し となってしまいます。つまり、引数にループの最後の数字+1が渡されてしまいます。 どうしたらよいのでしょうか？

  • アロー関数で変数に入れて名前のある関数にする

    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という名前の関数を作らないと実行できないので、停止できない理由はわかっているのですが、アロー関数で変数に入れて名前のある関数にすることができないのでどうすれば両方とも実現できるのかわかりません。

  • 複数のイベントリスナーを設置するのは正しい？

    クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、 イベントリスナーの使い方はこのようなやり方でよいでしょうか。 var d = document.getElement.ById("id"); d.addEventListener('click', function(e){ var tar=e.target; tar.style.backgroundColor ="#000000"; },false); d.addEventListener('mouseover', function(e){ var tar=e.target; tar.style.backgroundColor ="#aaaaaa"; },false); d.addEventListener('mouseout', function(e){ var tar=e.target; tar.style.backgroundColor ="#555555"; },false);

  • クリックカウンター

    クリックカウンターでの質問です。次の人になるとまた「0」になってしまいます。どうしてなのでしょう？　どなたか直していただけないでしょうか。 <HTML> <head> <Script language="JavaScript"> <!-- var cnt = 0; var flg = true; function f_click(){ if(flg){ cnt++; document.getElementById('Ninzu').innerHTML=cnt; flg = false; } } //--> </Script> </head> <BODY> <center> あなたは<span id="Ninzu">0</span>人目です。<br> <input type=button value="クリックしてね" onClick="f_click()"> </center> </BODY> </HTML>

  • actionscript3.0でボタン操作無効化

    flashのＨＰを作っております。 (mc)ボタンを配置しクリックすると画面の背景が変わる操作をしたいと思っており（top、new、main・・・など） 下記のＨＰのような http://www.mediacreator.jp/tutorials/show_tutorial.asp?id=69&pn=3 操作ボタンを作っております。 上記ＨＰは2.0で製作されているため、3.0に改変し、 アクションを下のようにしました。 var buttonNames= new Array("button1", "button2", "button3", "button4"); button1.buttonMode = true; button2.buttonMode = true; button3.buttonMode = true; button4.buttonMode = true; button1.addEventListener(MouseEvent.CLICK, button1click); button2.addEventListener(MouseEvent.CLICK, button2click); button3.addEventListener(MouseEvent.CLICK, button3click); button4.addEventListener(MouseEvent.CLICK, button4click); function resetButton(buttonName){ for(var i = 0; i < buttonNames.length; i++){ if(buttonNames[i] != buttonName){ this[buttonNames[i]].gotoAndStop(1); this[buttonNames[i]].enabled = true; } } } function button1click(event:MouseEvent):void { resetButton(button1); this.gotoAndStop(2); this.enabled = false; } function button2click(event:MouseEvent):void { resetButton(button2); this.gotoAndStop(2); this.enabled = false; } function button3click(event:MouseEvent):void { resetButton(button3); this.gotoAndStop(2); this.enabled = false; } function button4click(event:MouseEvent):void { resetButton(button4); this.gotoAndStop(2); this.enabled = false; } コンパイルエラーは無くなったのですが、ボタン自体が動いてくれません。 どこが間違っているか分かる方、お教え下さい！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する