質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4169閲覧

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

beginner.tanaka

総合スコア23

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/10/05 14:09

編集2020/10/05 14:25

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

前提・実現したいこと

下記のサイトと同様の物を、まず作成してみようと思い、やってみたのですがうまくできません。
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);

ですが同様のエラーがでてしまいます。。。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

ます質問者様
あなたは何も悪くない。元とした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点だけ見るのではなく、視野を広げて様々な方向性から試行錯誤してみたいと思います!
guest

0

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

beginner.tanaka

2020/10/06 00:51

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

2020/10/06 00:54

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

0

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

投稿2020/10/05 14:17

y_waiwai

総合スコア87719

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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 しかし、何も変わりませんでした。 理解できず、申し訳ございません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問