１から始まってクリックするたびに1増えるようにした

質問

下記の式をイベントリスナーに入れて１から始まってクリックするたびに1増えるようにしたいのですが二度目からNaNになります。

let i ;
let stage = ++i;
console.log(stage);

再宣言のiが何度も実行されるのがまずいのでしょうか？

回答No.5

amanojaku1 · ベストアンサー

>回答No.4　amanojaku1

>var stageNum = 0；

↑申し訳ございません、全角文字が入ってました(「；」が全角文字)。
とりあえず下記のように変更してみて下さい。

(() => {
const startBtn = document.getElementById('js-start-btn');
var firstClick = true;
var stageNum = 0;

startBtn.addEventListener('click', ()=> {

if(firstClick) {
グローバル宣言
firstClick = false;
}

// iが+1された後の値が入る
stageNum++;
});
})();

お礼

https://okwave.jp/qa/q9322322.html
ありがとうございました。
再質問にした方が良いかと思い上記に再質問しましたので、よろしければ見てみてください。

グローバルにすることで確かにundefunedにならなくなりました。
ただ新しい課題ですが、
var speedBase = 2000;というスピードを決める値をクリック数が上がるごとに0.8をかけ続けてどんどん短くしていくなどができません。

ずっとスピードが2000のままです。

クリック二度目はこうするとクリックごとに0.8倍をかけて徐々に数値を小さくすることはできないのでしょうか。
今はクリック二度目であると条件式で使えるような値を取得することが
できないのでしょうか？

回答No.4

amanojaku1

>変数をイベントリスナーの外(そと)でグローバル宣言(又は無宣言)する必要がある

訂正です、変数をイベントリスナーの外(そと)でグローバル宣言は「var」付きの設定、又は「var」無しの設定の どちらかでグローバル変数を設定して下さい。

>繰り返し処理はすべてiを使わないといけないと思っていたのですがそうではなくfor文内で使う時だけiを使えばいいのですね。

「i」などの1文字変数はループなどやループ以外でも局所的な処理に使用される事が多いです(絶対と言う程でもないのですが、基本ローカル変数で使用されると思って下さい)。

ですから(前述した通り)下記の「stageNum」をグローバル宣言して頂かないとウマくいかないのですが？、「++stageNumDefault」の処理も変です。

let stageNum = ++stageNumDefault;

恐らく下記ページのJSのソースは わりと最新のシンタックスだと思われます(当方は古いJSしかしりませんがJavaに類似しているようです)。

https://codepen.io/anon/pen/VbPpby

とりあえず下記のように変更してみて下さい。

(() => {
const startBtn = document.getElementById('js-start-btn');
var firstClick = true;
var stageNum = 0；

startBtn.addEventListener('click', ()=> {

if(firstClick) {
グローバル宣言
firstClick = false;
}

// iが+1された後の値が入る
stageNum++;
});
})();

回答No.3

amanojaku1

変数「i」も「countClick」にしては如何でしょうか？
それはさて置き、グローバル変数なら下記のようにイベントリスナー内で「var」を使ってはいけません。

>var i = 0;
>var firstClick = false;

お礼

ありがとうございます。
繰り返し処理はすべてiを使わないといけないと思っていたのですがそうではなくfor文内で使う時だけiを使えばいいのですね。

ないしはわからないのですべてiを付けなくても良いのでしょうか？

またご回答の問題は再宣言になっているからで再代入にしないといけなかったという事ですかね？

補足

stageNumDefault
の二度目クリック時に数値が増えていかずNaNになってしまいます。

https://codepen.io/anon/pen/VbPpby
に再現しておきました。

回答No.2

amanojaku1

>回答No.1　amanojaku1

>再宣言のiが何度も実行されるのがまずいのでしょうか？

訂正です、ローカル宣言(let)なので、letで何度も宣言しても、シンタックス的には問題ないように思われます(この場合、当然プロセスとして間違ってます)。
ローカル宣言(let)ではなく、変数をイベントリスナーの外(そと)でグローバル宣言(又は無宣言)する必要があると言う事です。

お礼

また他の質問で恐縮ですが、二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、下記ですと何度も初期化されてしまい困っています。

var firstClick = true;
if(firstClick) {
var i = 0;
var firstClick = false;
}

これもvar firstClick = true;をイベントリスナー外で実行するべきという事でしょうか？

補足

var firstClick = true;をグローバルに移動してみましたが今度はなぜかundefinedになってしまいます。
なぜイベントリスナー外に出すとundefinedになってしまうのでしょうか？
trueを0にしてもやはりundefinedになってしまいます。

回答No.1

amanojaku1

>再宣言のiが何度も実行されるのがまずいのでしょうか？

そのとおりです。
ローカル宣言(let)ではなく、変数をイベントリスナーの外(そと)でグローバル宣言(又は無宣言)して下さい。
他の変数名とコンフリクト(衝突、競合)しないように注意して下さい(変数名を長くするとか、分かりやすい事も重要です)。

お礼

一度クリックしたときにlet i ;と宣言できていれば次にクリックしたときはすでに宣言済みになり、そんな変数はないとならないのですね。

またイベントリスナー外にあればもう一度クリックしたときに再度宣言のみの部分を読まないのでNaNにならないという事でしょうか？
再宣言でかつ何も代入しないとNaNになりエラーとなる仕様なのでしょうか？