@Kobutaemonposted at 2023-09-09

Javascriptでinputから値を取得するときのエラー

Q&A

Closed

解決したいこと

ローカル環境ではinputの値を.valueで正しく取得できるのですが、Github Pagesで実行するとエラーが吐かれます。解決方法を教えてください…

発生している問題・エラー

Uncaught TypeError: Cannot read properties of null (reading 'value')
    at window.document.onkeydown (index.js:4:16)

Javascript

window.document.onkeydown = (e) => {
  	if (e.keyCode === 13) {
        let element = document.getElementById("answer");
        if (element.value === "kst"){
            alert("success");
        }
	}  
}

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>test</title>
</head>
<body>
    <form class="pic" method="post">
        <img src="mystery.png">
    </form>
    <div class="text">
        <input type="text" placeholder="パスコード入力欄" id="answer">
    </div>
    <script src="index.js"></script>
</body>
</html>

備考

作りたいものの全体像のお話をすると、inputに特定のワードを入れるとアラートが出る？というプログラムが作りたいです。
その特定のワード検知にjavascriptを使用したいのですが、上記のエラーが吐かれてしまいます。
初学者なので上級者の方からしたら簡単な内容の質問かとは思いますが、もしよろしければお力添えいただけますと幸いです。

0 likes

2Answer

@itagagaki posted at 2023-09-10

Cannot read properties of null (reading 'value')

オブジェクト null にプロパティ value が無いという意味です。まあ nullなので、それはそうです。

ということは、

let element = document.getElementById("answer");

getElementByIdがnullを返し、elementにnullが代入されている。つまりdocumentにanswerというidを持つ要素が無かったのでしょう。

しかしながら、コードとしては特段の問題は無いようです。HTMLコードに <input type="text" placeholder="パスコード入力欄" id="answer"> が本当に存在するならGitHub Pagesでも動くはずですよ。念のため試してみましたが動きました。

大体のことは単純なconsole.logデバッグでわかります。コードを下記のようにして、ブラウザの開発者ツール（Ctrl+Shift+J）を開き、[コンソール]タブでconsole.logの出力を確認しましょう。

window.document.onkeydown = (e) => {
  console.log('keydown');
  if (e.keyCode === 13) {
    let element = document.getElementById("answer");
    console.log('element:');
    console.log(element);
    if (element) {
      console.log('element.value:' + element.value);
      if (element.value === "kst"){
        alert("success");
      }
    }
  }  
}

なお、GitHub Pagesは、リポジトリのコードを変更してから、それが反映されるまで、数十秒～数分かかります。変更後のコードがウェブサーバーから来ているかは、開発者ツールの [ソース]タブを見ればわかると思います。変更が反映されていなかったら、しばらくしてから（ブラウザのキャッシュもあるので）Ctrl+F5でページをリロードしてみましょう。

2Like

Comments

@Kobutaemon
Questioner
仰られた通り、HTMLでinputのidがclassになってました…
確認不足での質問失礼しました。この回答のお陰で気づけました。回答ありがとうございました！
@SurferOnWww

仰られた通り、HTMLでinputのidがclassになってました…

話が違ってませんか？　元の話は「ローカル環境」でOK、「Github Pagesで実行」で NG ということだったはず。「HTMLでinputのidがclass」でどうしてそうなるんですか？
@Kobutaemon
Questioner
ローカルで開発する → Github Pagesにファイルをアップロードのようにしていたのですが、どこかのタイミングでhtmlのinputとidが入れ替わってしまった。ということでした。
分かりづらくて申し訳ないです。解決はしているので気になさらなくて大丈夫です。
@SurferOnWww

解決はしているので気になさらなくて大丈夫です。

質問者はそれでいいかもしれませんが、ここのような Q&A サイトは「情報交換の場所」とか「価値あるコンテンツを残す」という目的を持っているので、その趣旨に沿って情報をお願いします。

（「HTMLでinputのidがclass」でどうしてそうなるんですか？・・・と聞かれる前に、「どこかのタイミングでhtmlのinputとidが入れ替わってしまった」と書いておくなど）
@Kobutaemon
Questioner
ご指摘ありがとうございます。
次回から気をつけます。

@SurferOnWww posted at 2023-09-10

Github Pages は触ったこともないのでハズレかもしれませんが・・・

ローカル環境ではinputの値を.valueで正しく取得できるのですが、Github Pagesで実行するとエラーが吐かれます。

サーバーの違いでそういう問題が出るというのは考えにくいのですが、エラーメッセージだけ見ると、

let element = document.getElementById("answer");

のところで、「ローカル環境」では answer という id を持つ input 要素が取得できるが、「Github Pagesで実行」では取得できないということのように見えます。

とすると、「Github Pagesで実行」の場合、疑わしいのは getElementById の時点では input 要素が存在しない、もしくは id が answer ではないということです。

上にも書いたように、サーバーの違いでそういう問題が出るというのは考えにくいのですが、念のため、そのあたりをブラウザの開発ツールを使ってデバッグして調べるとかしてみてはいかがですか？

あと、JavaScript のコードも見直した方がよさそうです。

getElementById を onkeydown イベントで毎回やらないで一番最初に一回だけ window.onload イベントなどで実行するとか、onkeydown イベントを使うのは止めて input 要素の change イベント（入力してフォーカスを移動すると発生）で処理するとか。