javaScriptでグローバル変数に値が入らないのはなぜ？

javaScriptでChromeの画面を操作しようとしているのですが、
スクリプトの最初に var wCode = ""; と宣言しまして、
タイムインターバル（setInterval）で1分毎に動く関数を作成、
addリスナー（addEventListener）関数で、別スクリプトから、
変数 wCode に値をセットしました。（値のセットは確認できました）

グローバル変数だからタイムインターバルの関数でも、
イベントリスナーでセットされたタイミングで、
wCode に値が入る思っていましたが、値が入ってきません。なぜでしょう。
１分毎に画面の状態を監視するスクリプトにしたいのです。

作り方に何か問題があるのでしょうか。
いわゆるマニフェストを作成して、準備したコンテンツＪｓ
ではローカルファイルのデータを読むことができないように、
何かの制約があるのでしょうか。

ちなみにソースは別の場所にあるので、残念ながら掲載できません。
変数のスコープと言うものを勉強してみましたが、
特に潰し合いをするような作りもしていないつもりです。

この質問の原稿を書いていて思いついたのは、
イベントリスナーの関数の中に、入れ込むような形で、
タイムインターバルの関数を書けば、解決できるでしょうか。

javaScriptは初心者なので教えてください。よろしくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/11/25 11:30

こんにちは

曖昧なご質問なのと、文章ののあちこちに意味不明のところがあるのでなんともわかりかねますが…

＞ソースは別の場所にあるので、残念ながら掲載できません。
再現できる最低限の単純化したものを示さないと、何をやっているのかすらわかりません。
ましてや、質問者様が何をわからないのかは「神のみぞ知る」状態かと。

一般論で言えば、
グローバル変数はグローバルオブジェクトのプロパティです。
ウェブブラウザの場合は、windowオブジェクトがグローバルオブジェクトに当たります。
原則として、グローバル変数は、他の全てのスコープから参照可能です。
…となりますが、あくまでも文書単位なので、別文書や別window間で直接的に別のグローバル変数を参照しようとしてもできません。


適当に、ありそうな例を挙げてみると…
・異なる環境（文書等）間で参照しようとしている
・グローバル変数のつもりがそうなっていない
・ローカルなスコープに同名の変数が存在する
・setInterval等の遅延関数を使っているようですが、実行のタイミングを勘違いしている
　　・・・・・
　　・・・・・
などなど…

例えば、
　let v = 1;
　setTimeout(()=>{ v = 10; }, 1000);
　console.log(v); //→ 1 と出力される
で、10と出力されるのを期待するとか…

あるいは、Timeoutの実行待ちをして、
　let v = 1;
　setTimeout(()=>{ v = 10; }, 1000);

　let a = 1, t = Date() + 1500;
　while( Date()<t ){ a = ++a % 10; }
　console.log(v); //→ 1 と出力される
で、10 と出力されるのを期待するとか…

というような辺りが、オチのような気もしますが‥‥？

この回答へのお礼

わざわざありがとうございました。
別の変数を立てて処理を単純化したら、期待通りに値が入りました。
結局の所、イベントが二重に発生していて、セットした値を消していました。
お騒がせして申し訳ありませんでした。
今後はもっとあれこれ調べてから質問するようにしたいと思います。
解説ありがとうございます。とても参考になりました。

お礼日時：2020/11/25 20:25

No.2 回答者： yambejp 回答日時： 2020/11/25 12:58

普通にやれば問題なさそうですけどね・・・

<script>
var num=1;
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#view').textContent=num;
setInterval(()=>{
num++;
document.querySelector('#view').textContent=num;
},1000);
document.querySelector('#btn').addEventListener('click',()=>{
num+=100;
document.querySelector('#view').textContent=num;
});
});
</script>
<input type="button" id="btn" value="+100">
<div id="view"></div>

この回答へのお礼

色々ありがとうございます。
結局の所、イベントが二重に発生していてセットした値を消していました。
いただいたソースコードは少々難解なのですが、勉強しようと思います。
また、今後はもっとよく調べてから質問したいと思います。
お騒がせして申し訳ありませんでした。回答ありがとうございました。

お礼日時：2020/11/25 20:28