JavaScript　グローバル変数

前提・実現したいこと

JavaScript でHTMLからquerySelectorを使ってDOM取得しようとしております。
ボタン押下後に関数呼び出され、input textの中身を取得　の流れですが、中身が無いと言われてしまいました。
なんとなくですが、関数だけが呼び出されて、関数外の変数は読み込んでないとは思うのですが、それが「なぜ」なのかわかりません。
なぜこの場合のグローバル変数は実行されないのでしょうか？

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

app.js:9 Uncaught TypeError: Cannot read property 'value' of null
    at addButtonClick (app.js:9)
    at HTMLButtonElement.onclick (index.html:18)

該当のソースコード

HTML
1<body>	
2    <section>
3      <form>
4        <input type="text" class="todoThingText">
5        <button type="button" class="addButton" onClick="addButtonClick()">Add</button>
6      </form>
7    </section>

JavaScript
1const todoThing = document.querySelector('.todoThingText');
2const addButton = document.querySelector('.addButton');
3const todoList = document.getElementById('contentsList');
4
5//Function
6function addButtonClick() {
7  var input_message = todoThing.value;
8}

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

回答2件

ベストアンサー

undefinedではなく、nullとなっているようですねので変数は読み込まれています。

document.querySelectorは、要素を取得できないときにnullを返します。
また、DOM要素がレンダリングされるまえにJavaScriptファイルが読み込まれて実行されていると、要素の取得に失敗します。

該当のソースコードからは読み取れないのですが、app.jsが<script>タグで読み込まれているのが<input type="text" class="todoThingText">より前にとなっているのではないでしょうか？

jsファイルの読み込みを</body>タグの前にしてみてください。

投稿2020/12/22 11:51

azukiazusa

総合スコア112

mtttttttttttt

2020/12/23 11:27

まさしくjsファイルをファイル冒頭に書いていました。レンダリングされる前に読み込みすると要素の取得に失敗するのですね。次から気をつけます。

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

関数につっこんでしまっては？

javascript
1function addButtonClick() {
2  const todoThing = document.querySelector('.todoThingText');
3  const addButton = document.querySelector('.addButton');
4  const todoList = document.getElementById('contentsList');
5  var input_message = todoThing.value;
6  console.log(input_message );
7}