JavascriptのgetElementsByNameで取得したvalueの値をコンソールで表示した時にundefindとなる件

わからないこと

JavascriptのgetElementsByNameの挙動を確かめるために(HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方)というサイトを参考にし以下のプログラムを書きました。

<body>
    <form name="myform">
        <input name="title" type="text" value="Hello World1">
        <input name="title" type="text" value="Hello World2">
        <input name="title" type="text" value="Hello World3">
    </form>

    <script>
        var name = document.getElementsByName('title');
        console.log(name[0].value);
    </script>
</body>

実際に実行をしコンソールを確認すると「undefind」と出力されました。
試しに、nameという変数を「var names」としてみると「Hello World1」と表示されました。
なぜ、nameでは「undefind」となってしまったのか、その理由を教えていただきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

Windowオブジェクトのプロパティなので上書きできなくなっているのでは。

js
1        // window.top もデフォルトのプロパティが有るので同じような挙動
2        var top = document.getElementsByName('title');
3        console.log(top[0].value,top);
4        // let を使えばその問題は起きない
5        let name = document.getElementsByName('title');
6        console.log(name[0].value,name);

https://jsfiddle.net/0sjLagpq/

【Window - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window#properties

投稿2022/05/17 15:59

kei344

総合スコア69643

windowの属性を書き換えるのはさまざまな支障がでそうなのでやめたほうがいいですが
実験的にどうしてもnameで試したいということであばゲッタ/セッタを設定する手もないことはないです

javascript
1Object.defineProperty(window,"name",{get:()=>typeof _name=="undefined"?null:_name ,set:arg=>_name=arg});
2var name = document.getElementsByName('title');
3console.log(name[0].value);//Hello World1