これ何て呼びますか

詳しい人求む！

Javascriptのグローバル変数について質問です

解決済

  • 質問者：ひろニート
  • 質問日時：
  • 回答数：3件

以下のようなページを作りました。
textboxが5つ、
さらにscriptタグの中で５つの要素を読み込むグローバル変数 inputs が定義されています。
また、確認用にinputsの値をconsoleにを吐き出すためのボタンも作成しました。

ここで質問です。

この状態で、テキストボックスに何らかの入力を入れて、ボタンを押すと、常にその時のリアルタイムで入力している値が出力されます。このことが私にはとても不思議です。
常にリアルタイムの値を吐き出しているということは、常にinputsは最新の値を取り込まなければいけないはずですが、

このグローバル変数 inputsはページの読み込み時に一度、
inputs=document.getElemensByClassName("input");でイニシャライズしてから
一切読み込む機会がないように見えます。

でも、buttonを押すごとに最新の値が出てくるということは、何度もinput要素を読み込んでいるように見えます。これはどうなっているのでしょうか。
これがグローバル変数に対する質問かどうかわかりませんが、どうしてこれで最新の値を出力できるのかを教えてくださると助かります。よろしくおねがいします。


-------------------------------------サンプルソース-------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>global</title>
</head>
<body>
<input type="text" class="input" id="1"> <br>
<input type="text" class="input" id="2"> <br>
<input type="text" class="input" id="3"> <br>
<input type="text" class="input" id="4"> <br>
<input type="text" class="input" id="5"> <br>

<button onclick="show();">inputの中身表示</button>
<script>
var inputs=document.getElementsByClassName("input");
function show(){
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].id + ":" + inputs[i].value);
}
}
</script>
</body>
</html>

質問者からの補足コメント

  • artoo さん返信ありがとうございます
    でもまだわからないことだらけです。
    途中からテキストボックスの数を増やして、7つとかにしても、inputs[6].valueなどがリアルタイムの値を返すのです。
    これはなぜなのでしょう。
    グローバル変数というよりオブジェクト配列に対する疑問ですかね

      補足日時：2020/07/01 02:39
    通報する
通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



ご提示の場合、変数inputsはDOMのHTMLCollectionとなっています。
個々のエレメントは、DOM要素への参照になります。

＞buttonを押すごとに最新の値が出てくる
inputs[i].value の文が実行される時に要素の値を参照しますので、その時点での最新の値が採用されます。
＞何度もinput要素を読み込んでいるように見えます。
input要素は読み込んでいませんが、input[i].value でその属性値としての値（=value）を参照しています。これは、inputs[i].value が実行される度に参照されます。

別の例ですが・・・
　var obj = { name: "hoge", value: 5 };
　console.log( obj.value ); // 5 --①
　obj.value += 5;
　console.log( obj.value ); // 10 --②

とすると、当たり前ながら、obj.valueが実行される時の（最新の）値が出力されることがわかると思います。（①と②で値が変わる）
上記では出力処理の途中で、「obj.value += 5;」として値の内容をスクリプトから変更していますが、DOM要素の場合はユーザの操作によっても値を変更することができるので、スクリプトから特に変更などをしていなくても、「inputs[i].value」を実行する時によって、value値は同じままのこともありますし、変わっていることもあります。


＞inputs[6].valueなどがリアルタイムの値を返すのです。
DOM APIの特徴として、getElementsByClassNameなどいくつかのメソッドでは、「生きたCollection（あるいはNodeList）」が返されます。
（静的なリストが返されるメソッドもありますのでご注意）
「生きている」ことの意味は、DOMに変更があった場合に動的にその状態が反映されるということです。
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/El …
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： artoo
  • 回答日時：

> ボタンに限らずに数式等でinputs[i].valueを利用してもいつも最新の値が出てくるように感じます。


グローバル変数というのは、というより、グローバル変数に定義したオブジェクトのプロパティは
数式で利用しても最新の値を返してくれるものなのでしょうか？

ボタンからの起動かどうかとか、グローバル変数かどうかは、全然関係なくて、
どんな手段であれ、inputs[i].value の値を参照したら、その時点の値が参照されます。

> 途中からテキストボックスの数を増やして、7つとかにしても、

具体的に何をやったのでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

artooさん、お答えありがとうございます。
＞具体的に何をやったのでしょうか？
下のコードを改変してみたのですが、

例えば、textbox1個の時にshowボタンを押すと表示される要素は1つです。
ボタンをクリックして、2つにしてからshowボタンをおすと、2つの要素が表示されます。
いつの間に変数inputsに要素が読み込まれているのだろうと思いまして、そこが不思議でした。

fujillinさんの回答により、以下サイトから、
getElementByClassNameメソッドは動的であるということがわかりました。
global変数がどうのという問題ではなかったようです。おかげさまで問題が解決しました。
ありがとうございました。

https://developer.mozilla.org/ja/docs/Web/API/El …

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>global</title>
</head>
<body>
<div id="text">
</div>
<button onclick="show();">inputの中身表示</button><br>
<button onclick="add();">textboxの追加</button>
<script>
var inputs=document.getElementsByClassName("input");
var i=0;
function show(){
for(var i=0;i<inputs.length;i++){
console.log(inputs[i].id + ":" + inputs[i].value);
}
}
function add(){
var text = document.getElementById("text");
text.innerHTML = text.innerHTML + '<input type="text" class="input" id="' + i + '"> <br>';
i++;
}
</script>
</body>
</html>

通報する
お礼日時：2020/07/01 20:48

No.1

  • 回答者： artoo
  • 回答日時：

inputタグの値は、ボタンを押す度に関数showの中で毎回 inputs[i].value で取得しています。

    • good
    • 1
    • 件
通報する
この回答へのお礼

早速のご返信ありがとうございます。buttonを押すごとにinputs[i].valueを取得しているというお話ですが、

ボタンに限らずに数式等でinputs[i].valueを利用してもいつも最新の値が出てくるように感じます。
グローバル変数というのは、というより、グローバル変数に定義したオブジェクトのプロパティは
数式で利用しても最新の値を返してくれるものなのでしょうか？

通報する
お礼日時：2020/07/01 01:32

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報