LoginSignup
@yumen_0422

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

JavaScriptにて、HTMLのvalueを取得したいです。

Q&A

Closed

JavaScriptvalue

JavaScriptにて、HTMLのvalueを取得したいです。

趣味でJavaScriptでシフト表をある程度自動化することを想定したWebアプリを作っています。
HTMLのvalueを取得したいのですが、エラーが発生しました。
解決方法を教えてください。

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

JavaScriptの7行目、

const num1 = document.getElementById("num1").value;

のところに

Uncaught TypeError: Cannot read properties of null (reading 'value')

というエラーが発生しています

該当するソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>shift</title>
  </head>
  <body>
    <table border="1" id="table">
      <tr>
        <th id="name">氏名</th>
        <th>日</th>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th>土</th>
      </tr>
      <tr>
        <td>A</td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
      </tr>
      <tr>
        <td>B</td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x">✕</option>
        </select></td>
      </tr>
      <tr>
        <td>C</td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
        <td><select class="ox" name="">
          <option value="o">〇</option>
          <option value="x" selected>✕</option>
        </select></td>
      </tr>
      <tr>
        <td>人数</td>
        <td><input type="text" size="1" class="num" value="2"　id="num1" required></td>
        <td><input type="text" size="1" class="num"　id="num2" required></td>
        <td><input type="text" size="1" class="num"　id="num3" required></td>
        <td><input type="text" size="1" class="num"　id="num4" required></td>
        <td><input type="text" size="1" class="num"　id="num5" required></td>
        <td><input type="text" size="1" class="num"　id="num6" required></td>
        <td><input type="text" size="1" class="num"　id="num7" required></td>
      </tr>
    </table>
    <button type="button" name="button" id="btn">作成</button>

    <script src="main.js"></script>
  </body>
</html>

CSS

input:invalid {
  border: solid 1px tomato;
}

JavaScript

'use strict';

{
  const btn = document.getElementById('btn');
  const table = document.getElementById('table');
  const name = document.getElementById('name');
  const num1 = document.getElementById("num1").value;

  console.log(num1.value);

  btn.addEventListener('click', (
    // 一つでも入力フォームの埋まっていない部分があれば
  ) => {
    btn.textContent = 'もう一度!(^^)!';
  })

}

自分で試したこと

table のtextContentの取得はconsole.logで出来ました。
HTMLの各タグの中に直接入力した文字情報は取得出来て、inputの中の文字情報は他の方法でなければいけないのかなとも考えています。
しかし調べてもなかなか解決することが出来ず、こちらで質問させていただきます。

初歩的なミスをしているのだとは思うのですが、お手柔らかにご教示いただけますと幸いです。
よろしくお願いします。

0 likes

2Answer

Verclene
@Verclene

まず質問文のCodeblock表示でも赤線が出ている通り,idの直前に 全角スペース(U+3000) が混ざっている箇所があります.
VSCode等のエディタでは紛らわしい記号をハイライトできるので活用してください.

もう1箇所,valueプロパティを2重に参照しているところがあります.
こちらもエディタで変数の情報をチェックしながらコーディングするといいです.

  const num1 = document.getElementById("num1").value;

-  console.log(num1.value);
+  console.log(num1);
0Like

Comments

  1. @yumen_0422

    Questioner

    全角スペースとvalueプロパティの重複をなくしたら実行することが出来ました！
    ご丁寧にありがとうございました！
tonberry1050
@tonberry1050

Uncaught TypeError: Cannot read properties of null (reading 'value')
このエラーの意味は、nullに対してプロパティを見ようとしていると言われています。

const nullVal = null:
nullVal.value; // これの時に出るエラー

つまりdocument.getElementById("num1")がnullだと怒られています。

const num1Element = document.getElementById("num1");
console.log(num1Element); // たぶんnull
const num1 = num1Element .value; // ここで上記エラー

内容を精査していませんが、idはあってるように見えるので、domが生成される前にjsが実行されているのだと思います。DOMContentLoadedなどを試すとどうでしょうか？

window.addEventListener('DOMContentLoaded', (event) => {
  const btn = document.getElementById('btn');
  const table = document.getElementById('table');
  const name = document.getElementById('name');
  const num1 = document.getElementById("num1").value;

  console.log(num1.value);

  btn.addEventListener('click', (
    // 一つでも入力フォームの埋まっていない部分があれば
  ) => {
    btn.textContent = 'もう一度!(^^)!';
  })
});
0Like

Comments

  1. @tonberry1050

    と、思ったのですが、@Verclenさんが指摘した通りnum1.valueが重複していますね。

    この手のエラーが出たときは、プロパティを参照する前に一個づつオブジェクトの中身を確かめると気づきやすいです。
    （VSCode等賢いエディタを使うと実行前に型からエラーを教えてくれたりもします）

  2. @yumen_0422

    Questioner

    num1.valueの重複をなくしたら実行出来ました！
    丁寧にお教えいただき、ありがとうございました！

Your answer might help someone💌

LoginSign Up