チェックボックスでチェックした数を数える方法を教えてください。

プログラミング初学者です。単純なミスだとは思いますが、解決することができません。
よろしくお願い致します。

前提・実現したいこと

下記のサイトと同様の物を、まず作成してみようと思い、やってみたのですがうまくできません。
https://into-the-program.com/javascript-get-checked-count/

Uncaught TypeError: Cannot read property 'addEventListener' of null
というエラーが出ているので、addEventListenerが存在していないっというエラーだと思うのですが
どのようにしたら解決できるのでしょうか？？

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

javascript
1//チェックボックスを取得する
2const el = document.getElementsByClassName("checks");
3//カウントボタンを取得する
4const btn = document.getElementById("btnn");
5
6//チェック済みのチェックボックスの数を返す
7const getCheckedCount = () => {
8
9    let count = 0;
10
11    for (let i = 0; i < el.length; i++) {
12        if (el[i].checked) {
13            count++;
14        }
15    }
16    alert(count);
17};
18
19//ボタンをクリックした時に「getCheckedCount()」を呼び出す
20btn.addEventListener("click", getCheckedCount, false);

html
1<div id="app">
2    <form>
3        <label>
4            <input class="checks" type="checkbox" name="lang" value="javascript">JavaScript
5        </label>
6        <label>
7            <input class="checks" type="checkbox" name="lang" value="jquery">jQuery
8        </label>
9        <label>
10            <input class="checks" type="checkbox" name="lang" value="html">HTML
11        </label>
12        <button id="btn" type="button">Count</button>
13    </form>
14</div>

試したこと

btn.addEventListener("click", getCheckedCount, false);
の場所がダメなのかと思い、上に設置したりしましたが、同じエラーで解決することができませんでした。
ご助力のほどよろしくお願いします。

###追記
btnのコードをミスしていた為、修正しました。

//チェックボックスを取得する
const el = document.getElementsByClassName("checks");
//カウントボタンを取得する
const btn = document.getElementById("btn");

//チェック済みのチェックボックスの数を返す
const getCheckedCount = () => {

    let count = 0;

    for (let i = 0; i < el.length; i++) {
        if (el[i].checked) {
            count++;
        }
    }
    alert(count);
};

//ボタンをクリックした時に「getCheckedCount()」を呼び出す
btn.addEventListener("click", getCheckedCount, false);

ですが同様のエラーがでてしまいます。。。

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

回答3件

ベストアンサー

ます質問者様
あなたは何も悪くない。元としたURLが悪いんです。
あの説明だとこのような状態に絶対なります。(特に初心者は)

普通はjavascriptとHTMLは別に書きますが質問者様はこの様に書かれたと思います。

HTML
1<html>
2<head>
3<meta charset="UTF-8">
4<script type="text/javascript">
5	//チェックボックスを取得する
6	const el = document.getElementsByClassName("checks");
7	//カウントボタンを取得する
8	const btn = document.getElementById("btn");
9
10	//チェック済みのチェックボックスの数を返す
11	const getCheckedCount = () => {
12
13	    let count = 0;
14
15	    for (let i = 0; i < el.length; i++) {
16	        if (el[i].checked) {
17	            count++;
18	        }
19	    }
20	    alert(count);
21	};
22
23	//ボタンをクリックした時に「getCheckedCount()」を呼び出す
24	btn.addEventListener("click", getCheckedCount, false);
25</script>
26</head>
27<body>
28<div id="app">
29    <form>
30        <label>
31            <input class="checks" type="checkbox" name="lang" value="javascript">JavaScript
32        </label>
33        <label>
34            <input class="checks" type="checkbox" name="lang" value="jquery">jQuery
35        </label>
36        <label>
37            <input class="checks" type="checkbox" name="lang" value="html">HTML
38        </label>
39        <button id="btn" type="button">Count</button>
40    </form>
41</div>
42</body>
43</html>

これ書き方としては合っているんですが仕組みとしては不正解なんです。
正確にはこの様な書き方をします(これも1例ですが)

HTML
1<html>
2<head>
3<meta charset="UTF-8">
4<script type="text/javascript">
5window.onload = function() {
6	//チェックボックスを取得する
7	const el = document.getElementsByClassName("checks");
8	//カウントボタンを取得する
9	const btn = document.getElementById("btn");
10
11	//チェック済みのチェックボックスの数を返す
12	const getCheckedCount = () => {
13
14	    let count = 0;
15
16	    for (let i = 0; i < el.length; i++) {
17	        if (el[i].checked) {
18	            count++;
19	        }
20	    }
21	    alert(count);
22	};
23
24	//ボタンをクリックした時に「getCheckedCount()」を呼び出す
25	btn.addEventListener("click", getCheckedCount, false);
26}
27</script>
28</head>
29<body>
30<div id="app">
31    <form>
32        <label>
33            <input class="checks" type="checkbox" name="lang" value="javascript">JavaScript
34        </label>
35        <label>
36            <input class="checks" type="checkbox" name="lang" value="jquery">jQuery
37        </label>
38        <label>
39            <input class="checks" type="checkbox" name="lang" value="html">HTML
40        </label>
41        <button id="btn" type="button">Count</button>
42    </form>
43</div>
44</body>
45</html>

前とどこが変わったかというと

javascript
1window.onload = function() {
2}

とscriptの処理を「ウインドウに読み込こまれた後に実行して下さい」と指定したことです。
これは参考にされたURLには書かれていない情報です。

なぜエラーになったかというとWebの処理は基本上から書かれた内容に合わせて処理をします。
前の状態ですと
「scriptの処理がウインドウに表示を行う前に実行され、
ボタンまだできていないので取得できなくエラーとなっていた。」
というわけです。

仕組みが判ってから参考にする分には良いのかもしれませんが
初心者向けみたいに書いておいてあれでは間違いをおこしてもしょうがありません。
参考にする際は「こういう事がある」と認識されて、複数個所から情報を得るようにされてはいかがでしょうか？

投稿2020/10/05 18:16

kuma_kuma_

総合スコア2506

beginner.tanaka

2020/10/06 00:45

ありがとうございます！！問題なく動作が行われました！確かに1点だけ見るのではなく、視野を広げて様々な方向性から試行錯誤してみたいと思います！

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

javascript
1window.addEventListener('DOMContentLoaded', ()=>{
2  document.querySelector('#btn').addEventListener('click',()=>{
3    const count=document.querySelectorAll('.checks:checked').length;
4    alert(count);
5  });
6});

投稿2020/10/06 00:27

yambejp

総合スコア116724

beginner.tanaka

2020/10/06 00:51

回答していただきありがとうございます！！計算式を記述しなくても、CSSの方で数を数えることができるんですね！とても参考になりました。

yambejp

2020/10/06 00:54

> CSSの方 CSSというより「セレクタ」ですね

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

そのbtnがnullなのでは。
そこらへんチェックしてみよう

投稿2020/10/05 14:17

y_waiwai

総合スコア88042

beginner.tanaka

2020/10/05 14:22

const btn = document.getElementById("btnn"); になってる！っと思い修正しました。ご指摘ありがとうございます。ですが、エラー内容は変わりませんでした。。。。どこが悪いのでしょうか・・・・。

y_waiwai

2020/10/05 14:27

キャッシュ読んでるだけとかはないでしょうか

beginner.tanaka

2020/10/05 14:38

キャッシュを読んでいるというのは、無効化した方が良いということでしょうか？ config/environments/development.rbファイルにある、以下のコードをfalseにしてみました。 config.action_controller.perform_caching = true →　false しかし、何も変わりませんでした。理解できず、申し訳ございません。

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

あなたの回答