"document.getElementById("val")."までを入力した際に，"value"が補完にでるようにしたい

前提・実現したいこと

Javascriptの学習をしています．エディタはVSCodeを使用しています．
下記のコードなかで"document.getElementById("val")."までを入力した際に，"value"のインテリセンスが表示されません．
表示されるようにするにはどうしたよいのか，アドバイスをいただきたいです．
よろしくお願いします．

発生している問題・エラーメッセージ

"document.getElementById("val")."までを入力した際に，"value"のインテリセンスが表示されない．

該当のソースコード

javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>Document</title>
8    <script>
9    function display()
10    {
11        let disp = document.getElementById("val").value
12        let r = document.getElementById("result");
13        r.textContent = disp
14    }
15    </script>
16</head>
17<body>
18    <input id="val" />
19    <button onclick="display()">表示</button>
20    <p id="result"></p>
21</body>
22</html>

補足情報（FW/ツールのバージョンなど）

エディタ:VSCode 1.34.0
拡張機能はいれていません

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

回答1件

ベストアンサー

getElementById の戻り値は HTMLElement で、HTMLInputElementインターフェイスを持っているかどうかは要素のタグまで解析しないと分かりませんが、デフォルトだとそこまではやってくれないみたいです。

JSDocが使えるので、コーディングする際にプロパティの一覧を見たい、という用途であれば
@typeアノテーションが使える様です。

JavaScript
1/** @type {HTMLInputElement} */
2let val = document.getElementById('val');
3
4val. // @typeでvalはHTMLInputElementと定義しているので入力候補が変わる
5

投稿2019/06/05 16:28

Eggpan

総合スコア2729

m.ts10806

2019/06/06 00:44

Bracketsとか他のエディタも一回変数で受けないと valueは出してくれませんね（nodeValueなどは出る）。どのエディタでも大抵そういうものかもしれません。

takes_

2019/06/06 13:16

ありがとうございます!参考になりました!

Eggpan

2019/06/10 12:52

気になっていくつかエディタ試してみましたけど、自動でinputタグの検出まではやってくれるものはなさそうですね。よくよく考えたら同じファイルのscriptタグならともかく、JavaScriptが別ファイルの場合は呼び出し元のhtmlファイルの中身を解析しにいかないと無理なので作る人がいないのかもです。全部InputElement扱いにしたらdocument.getElementById('val')が<div>タグなのにvalueプロパティがあって、これはこれで邪魔、みたいになっちゃいますしね

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