【基本過ぎて申し訳ありません】計算結果が表示されません。なぜでしょうか？

JavaScript初心者です。度々申し訳ございません。
計算結果が表示されません。なぜでしょうか。
ご教授お願い致します。

html
1<!DOCTYPE html>
2<html>
3<body>
4<script>
5document.getElementById('q2btn').onclick = function () {
6  var num1 = parseFloat(document.getElementById('q2-1').value);
7  var num2 = parseFloat(document.getElementById('q2-2').value);
8  document.getElementById('q2').textContent = num1*num2;
9};
10</script>
11<p class="q-body">
12          <input id="q2-1" type="text" size="4">
13           ×
14          <input id="q2-2" type="text" size="4">
15          <button id="q2btn">計算</button><br>
16          計算結果：<span id="q2"></span>
17      </p>
18</body>
19</html>

m.ts10806

2019/08/13 20:30

初心者アイコンついてますしタイトル冒頭のただし書きは不要かと。要件本体とも関係ありませんし、基本的、初歩的だからと謝る必要はないです(むしろない方がありがたいくらい)

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

回答3件

<script>の要素が実行されたタイミングでidq2btnの要素が読み込まれてないからでは。
<script>の要素を<p>より下で定義してみてください。

追記
こういう記事を読んでおくと良いです。
（もっといいのがあった気がするけどすぐ出てこなかったので、色々探してみてください。）
【JavaScript】記述方法別の実行タイミングについて

投稿2019/08/13 15:47

編集2019/08/13 15:52

gentaro

総合スコア8949

Uncaught TypeError: Cannot set property 'onclick' of null at 5

5行目でエラーが出ています。

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('q2btn').onclick = function () {
    var num1 = parseFloat(document.getElementById('q2-1').value);
    var num2 = parseFloat(document.getElementById('q2-2').value);
    document.getElementById('q2').textContent = num1*num2;
  };
});
</script>

DOMがLoadされてからでないと実行できません。

投稿2019/08/13 15:53