文字数カウントができない原因を特定したい

文字数カウントができない原因を特定したい。

form_withのtextareaで作成したフォームに文字数カウント機能を付けたい。

エラー
Uncaught TypeError: Cannot read property 'addEventListener' of null
が表示される。

試したこと
下記コードを削除し、
window.addEventListener('load',count)
関数を
window.addEventListener('DOMContentLoaded', function() {};
で囲ってhtmlが読み込まれた後に文字数カウント機能が読み込まれるようにした。

その後、エラーは表示されなくなりましたが、
文字カウントもされない状況です。

エラー表示されていた時のコード

JS
1const count = ()=> {
2  const text = document.getElementById("memory_text");
3  const textCount = document.getElementById("text-count");
4
5  text.addEventListener("onkeyup", function(){
6    textCount.innerHTML = text.value.length;
7  },false );
8 };
9
10  window.addEventListener('load',count)

以下が現在のコードです。

ruby
1#viewファイルです
2
3<div class="memo">
4  <%= form_with model: @memory, local: true do |f| %>
5    <%= f.label :name, 'メモ' %>
6    <%= f.text_area :text %>
7    <p id="text-count">0文字</p>
8    <%= f.submit "保存" %>
9  <% end %>
10</div>
11
12

javascript
1
2window.addEventListener('DOMContentLoaded', function() {
3  
4 
5  const text = document.getElementById("memory_text");
6  const textCount = document.getElementById("text-count");
7
8  text.addEventListener("onkeyup", function(){
9    textCount.innerHTML = text.value.length;
10  },false );
11 
12});
13
14

以下、追加です。

form_withのtextareaのidです。　
検証で確認し<textarea name="memory[text]" id="memory_text"></textarea>とあります。

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

回答3件

質問文に載っているコードに問題はなさそうなので、それ以外のところに原因がありそうです。

Gemfile 内の

gem 'turbolinks'

をコメントアウトした上で、 onkeyup の代わりに input を指定するとどうなりますか？

投稿2021/02/26 15:22

shinoharat2

総合スコア73

fdajo

2021/02/26 22:45

回答有難うございます。頂いた助言を試してみましたが、コメントアウトもinputへの変更も効果ありませんでした。エラーも出ませんでした。せっかく助言をいただいたのにこの課題を解決できなくて申し訳ないです。

shinoharat2

2021/02/26 23:43

> エラーも出ませんでした。これは、turbolinks をコメントアウトしたら Uncaught TypeError: Cannot read property 'addEventListener' of null が出なくなったという意味でしょうか？

fdajo

2021/02/27 09:30

申し訳ないです。エラーは自分で解決？できていました。文字カウント機能が機能しない原因を特定したいということでした。内容を修正しましたので、ご確認いただけますと幸いです。

shinoharat2

2021/02/27 10:15

了解です！エラーは出てないんですね。文字数カウントが動かない原因ですが、「onkeyup」というイベントは存在しないため、「keyup」または「input」に変える必要があります。これは間違いないと思います。ただ、「input」に変えても効果が無かったとのことなので、他の原因もありそうですね????

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