addEventListenerがエラーになってしまう理由を教えていただきたいです。

大学で少し学んだだけでプログラミングは全くの初心者です。
課題が出されておりやってみたものの、
どこが間違っているのか全くわからないのでご教示していただきだいです。
よろしくお願いいたします。

前提・実現したいこと

Replitでチェックボックスのチェック項目から合計金額を算出するJavaScriptを作りたい。
値段はリンゴ200円、ブドウ300円、オレンジ400円です。

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

更新しても
TypeError: Cannot read properties of null (reading 'addEventListener')
このようなエラーメッセージが表示されてしまいます。

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JavaScript-5</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>食べたいものは</h1>
    <form id="fruitsbox">
      <label><input type="checkbox" id="apple">リンゴ</label>
      <label><input type="checkbox" id="grape">ブドウ</label>
      <label><input type="checkbox" id="orange">オレンジ</label>
    </form>
    <p id="msg3">メッセージ</p>
    <script src="script3.js"></script>
    
  </body>
</html>

<script>
function Change3() {
  var sum = 0;
  if (check1.checked) {
    sum +='200';
  } else {
    sum += '';
  }
  if (check2.checked) {
    sum +='300';
  } else {
    sum += '';
  }
  if (check3.checked) {
    sum +='400';
  } else {
    sum += '';
  }
  document.getElementById('msg3').innerHTML = '合計' + sum + '円です';
}

var check1 = document.getElementById('apple');
var check2 = document.getElementById('grape');
var check3 = document.getElementById('orange');

var checkButton = document.getElementById('fruitesbox');
checkButton.addEventListener('change', Change3);

補足情報（FW/ツールのバージョンなど）

OS:Windows10
ブラウザ:Microsoft Edge

maisumakun

2022/01/02 09:32

どの行でエラーが発生しているか、表示されてはいませんか？

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

回答3件

HTMLの方では

html
1
2<form id="fruitsbox">
3

と書かれているのにjavascriptの方で

JavaScript
1
2var checkButton = document.getElementById('fruitesbox');
3

となっています

「fruitesbox」のeが余計ですね。

投稿2022/01/02 09:37

Ryo99_1001

総合スコア25

TypeError: Cannot read properties of null (reading 'addEventListener')

エラー・メッセージを読めば、
nullから'addEventListener'というプロパティが読めない、とか言ってますよ

その'addEventListener'ってやつがくっついてる変数のナカミになに入ってるのか調べてみよう

投稿2022/01/02 10:46

編集2022/01/02 10:47

y_waiwai

総合スコア88042

ベストアンサー

HTMLにfruitsboxとあり、JavaScriptでfruitesboxを呼んでいるので要素が取得できないのでは。
（後者にeが多い）

投稿2022/01/02 09:34

kei344

総合スコア69606

yam1275

2022/01/02 10:57

そうですね！全然気が付きませんでした！こんな初歩的なミスに回答していただきありがとうございます！

yam1275

2022/01/02 11:50

度々申し訳ないのですが、直してみたところ合計金額を文字で表示するところに数字が並列されて’01000200’のようになってしまうのですが、’合計’＋　＋’円です’　この間にはsumではない何が入るのか教えていただけないでしょうか？

kei344

2022/01/02 12:55

sum +='200'; とか文字列として連結しているからそうなります。【テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN】 https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings#numbers_vs._strings

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

あなたの回答