【JS】取得してきたオブジェクトに対してaddEventListenerが機能しない理由を教えて頂きたいです。

haml
1%form#channel-form
2 .input-field.col.s6
3   %input#channel-input{:placeholder => "Enter Channel Name", :type => "text"}
4   %input.btn.grey.lighten-2#submits__btn{:type => "submit", :value => "Get Channel Data"}

js
1var channelForm = document.getElementById('channel-form');
2
3channelForm.addEventListener('submit', function(e){
4  e.preventDefault();
5
6  var channel = channelInput.value;
7
8  getChannel(channel);
9});

formタグの＃channel-formを取得してaddEventListenerを機能させたいのですが、
Uncaught TypeError: Cannot read property 'addEventListener' of nullというエラーがコンソールで表示されます。

対策：
:type => "submit"のinputタグのidを取得してきて

js
1var submitButton = document.getElementById('submits__btn');
2
3submitButton.addEventListener('submit', function(e){
4  e.preventDefault();
5
6  var channel = channelInput.value;
7
8  getChannel(channel);
9});

このように変更したが同じエラー文が表示されます。
どなたかお力添えよろしくお願い致します。

追記:

haml
1%form#channel-form
2 .input-field.col.s6
3   %input#channel-input{:placeholder => "Enter Channel Name", :type => "text"}
4   %input.btn.grey.lighten-2#submits__btn{:type => "submit", :value => "Get Channel Data"}
5
6%script{:src => "/assets/main.js"}

scriptタグの位置を追記しました。
haml内に直接javascriptを書いたりしたのですがうまくいきません。

haml
1!!
2%html
3  %head
4    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
5    %title Tube
6    = csrf_meta_tags
7    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
8    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
9

application.html.haml内のheadタグはこのようになっています。

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

回答2件

Uncaught TypeError: Cannot read property 'addEventListener' of nullというエラーがコンソールで表示されます。

実行するタイミングの問題、なのではないでしょうか。

HTMLは上から解釈されていきますので、JavaScriptを取得したいHTML要素より上に書いてしまうと、そのままではまだ要素が存在しないタイミングで実行されてしまいます。

投稿2020/01/30 11:23

maisumakun

総合スコア145183

norun07

2020/01/30 11:30

回答ありがとうございます。 scriptを読み込んでいる位置は要素の下に記述しております。

maisumakun

2020/01/30 11:40

Sprocketsでまとめられて、<head>内から参照されている、ということはないでしょうか？

norun07

2020/01/30 12:39

返答遅くなり申し訳ございません!! headの内容を追記致しました。

maisumakun

2020/01/30 12:41

app/assets/javascripts/application.jsの中に「require_tree .」のような内容はありませんか？

norun07

2020/01/30 13:27

帰宅してから確認してみます！お時間割いていただき本当にありがとうございます。

norun07

2020/01/31 07:42

//= require_tree .の記述を削除し //= require main.jsの記述を追加しましたが、Uncaught TypeError: Cannot read property 'addEventListener' of nullのエラーが出ています。構造はassets/javascripts/main.jsです。

maisumakun

2020/01/31 07:45

> require_tree .の記述を削除しそこはもとに戻して、main.jsの中身全体をdocument.addEventListener('DOMContentLoaded', function(){ /* ここに元の中身 */ }, false);としてください。 application.js経由で読み込まれる以上、イベント制御で読み込み後に持っていくのが適切かと思います。

norun07

2020/01/31 08:01

document.addEventListener('DOMContentLoaded', function(){ /* ここに元の中身 */ }, false); のように記述したのですが関数が参照されないエラーが出ました。 https://teratail.com/questions/238721 こちらで質問していますので、大変申し訳ないのですがご教授して頂きたいです。

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