JavaScriptで Cannot read properties of null (reading 'classList')のエラーが解決できない

実現したいこと

Cannot read properties of null (reading 'classList')のエラーを解決したい

発生している問題・分からないこと

フォームを入力し、条件を満たしている場合にページ遷移するというシステム実装中にエラーが発生する

エラーメッセージ

error
1Uncaught TypeError: Cannot read properties of null (reading 'classList')

該当のソースコード

html
1<!DOCTYPE html>
2
3<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
4<head>
5    <meta charset="utf-8" />
6    <title>モバイルオーダー</title>
7
8</head>
9<body>
10    <form method="post" action="main.html">
11        <p>名前</p>
12        <input type="text" maxlength="100" placeholder="山田太郎" id="name" autocomplete="name">
13        <p>学籍番号</p>
14        <input type="password" maxlength="20" placeholder="７桁の学籍番号" id="pass" autocomplete="pass" >
15        <p>商品</p>
16        <input type="text" maxlength="7"  id="food" autocomplete="food">
17       <p><input type="submit" value="注文を行う" id="order"></p>
18        
19       <script src="main.js"></script>
20</body>
21
22</html>

Javascript
1document.getElementById("order").onclick   = function() {
2                const name = document.getElementById("name").value;
3                const pass = document.getElementById("pass").value;
4                const food = document.getElementById("food").value;
5                
6                var flag = 0;
7                if(name.length == 0 || pass.length == 0 || food.length == 0) {
8                    flag = 1;
9                }
10                
11                if(flag == 1) {
12                    alert('必須項目が未記入の箇所があります');
13                } else {
14                    var regexp = /^\d{7}$/;
15                    if(regexp.test(pass) != true) {
16                        alert('学籍番号が7桁になっていません');
17                    } else {
18                        window.location.href='callback.html';
19                        console.log("使えている");
20                    }
21                }
22            };

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

多くの場合ではhtmlのidとJavascriptでのidがタイプミスなどによって異なっている場合に表示されるエラーであるそうなのですが、自分ではそのようなミスを見つけることができなかった

補足

特になし

s-ueshi

2024/05/12 12:48

JavaScriptのソースコードを拝見すると、"classList"プロパティは使用されていません。上記コード以外にも、"classList"を使用した記述をされている場合、そちらをコメントアウトしてみてはどうでしょうか。あくまで可能性ですが。。。

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

回答2件

invalidイベントで処理するとよいかも

PHP
1<script>
2document.addEventListener('invalid',({target})=>{
3  target.setCustomValidity(target.dataset.errormessage??"");
4},true);
5document.addEventListener('input',({target})=>{
6  target.setCustomValidity("");
7});
8</script>
9<form method="post">
10<dl>
11<dt>名前</dt>
12<dd><input type="text" placeholder="山田太郎" name="name" required data-errormessage="必須項目です" autocomplete="off"></dd>
13<dt>学籍番号</dt>
14<dd><input type="password" placeholder="７桁の学籍番号" name="pass" pattern="[0-9]{7}" required autocomplete="" data-errormessage="学籍番号は7桁の数値で必須項目です"></dd>
15<dt>商品</dt>
16<dd><input type="text" name="food" required data-errormessage="必須項目です"></dd>
17<dt>test</dt>
18<dd><input type="text" name="food" required></dd>
19<input type="submit" value="注文を行う" id="order">
20</form>

投稿2024/05/13 04:09

yambejp

総合スコア117663

ベストアンサー

フォームを入力し、条件を満たしている場合にページ遷移する

条件を満たしていない場合にアラートメッセージを出し、条件を満たしている場合は callback.html に遷移したいだけなら、下記のようなコードになります。

html
1<!DOCTYPE html>
2
3<html lang="ja" xmlns="http://www.w3.org/1999/xhtml">
4
5<head>
6    <meta charset="utf-8" />
7    <title>モバイルオーダー</title>
8
9</head>
10
11<body>
12    <form method="post" id="myform">
13        <p>名前</p>
14        <input type="text" maxlength="100" placeholder="山田太郎" id="name" autocomplete="name">
15        <p>学籍番号</p>
16        <input type="password" maxlength="20" placeholder="７桁の学籍番号" id="pass" autocomplete="pass">
17        <p>商品</p>
18        <input type="text" maxlength="7" id="food" autocomplete="food">
19        <p><input type="submit" value="注文を行う" id="order"></p>
20
21        <script src="main.js"></script>
22
23
24        <script>
25            document.getElementById("myform").addEventListener("submit", function (event) {
26                event.preventDefault();
27                const name = document.getElementById("name").value;
28                const pass = document.getElementById("pass").value;
29                const food = document.getElementById("food").value;
30
31                var flag = 0;
32                if (name.length == 0 || pass.length == 0 || food.length == 0) {
33                    flag = 1;
34                }
35
36                if (flag == 1) {
37                    alert('必須項目が未記入の箇所があります');
38                } else {
39                    var regexp = /^\d{7}$/;
40                    if (regexp.test(pass) != true) {
41                        alert('学籍番号が7桁になっていません');
42                    } else {
43                        window.location.href = 'callback.html';
44                        console.log("使えている");
45                    }
46                }
47            });
48
49        </script>
50</body>
51
52</html>

formタグ内の action="main.html" は削除してください（main.html についての情報や callback.htmlについての内容が質問文から故意に省略されているので、これについてはこちらでは一切関知しません）。またフォームにボタン１つを置いた状態だと、フォームのボタンを押したときに submit イベントが起きて、条件判定処理前に遷移してしまうので、フォームにidをつけてsubmitイベントを捕捉し、event.preventDefault()をつけて遷移を防ぎます。

投稿2024/05/12 11:57

編集2024/05/12 12:02