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

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

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

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

Q&A

解決済

1回答

1067閲覧

生成前の要素に対するイベントエラー

skilton

総合スコア9

JavaScript

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

0グッド

0クリップ

投稿2019/11/26 11:41

お疲れ様です。
独学で進めており、詰まってしまった為、質問させて戴きます。

実現したいことの流れ
[日記]
ページ移動をせず、ページ一枚で完結させたい。
+ボタンをクリック → 投稿内容入力 → 投稿ボタンをクリック → コンテンツ生成

詰まっている点:
投稿ボタンを押した時のイベントを設定しているが、初期画面では要素がまだ生成されておらず、エラーが出る。

この問題の解決のため、どういった内容を学べばよろしいでしょうか。

TypeError: Cannot read property 'addEventListener' of null
at HTMLDocument.<anonymous> (main.js:19)

html

1<div id="main"> 2 <div id="contents"> 3 4 5 </div> 6 <i class="fas fa-plus add-content-btn fa-3x"></i> 7 </div>

javascript

1document.addEventListener('DOMContentLoaded', function() { 2 const head_title = document.getElementById('title'); 3 const submit_btn = document.querySelector('.submit-btn'); 4 5const add_btn = document.querySelector('.add-content-btn').addEventListener('click', function() { 6 addContent(); 7 this.style.display = 'none'; 8},false); 9 10 11 12submit_btn.addEventListener('click', function() { 13 showContent_ite(); 14},false); 15 16 17function addContent() { 18 let div = document.createElement('div'); 19 div.className= 'content'; 20 div.innerHTML = '<form><input class="mini-title" name="title" type="text" size="50" placeholder="タイトル"><br><textarea maxlength="300" placeholder="内容" class="mini-content"></textarea><br><span class="sub-title">※テキストが入ります。テキストが入ります。テキストが入りま</span><br><div class="submit-area"><br><input class="submit-btn" type="button" value="投稿する"></div></div></form>'; 21 let contents = document.getElementById('contents'); 22 contents.appendChild(div); 23} 24 25function showContent_item() { 26 let div = document.createElement('div'); 27 div.className= 'content_item'; 28 div.innerHTML = '<h2 class="item-title"></h2>'; 29 content_item.appendChild(div); 30 31 32}

イメージ説明

```htm

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

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

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

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

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

guest

回答1

0

ベストアンサー

例示のhtmlの中に#titleや.submit-btnのセレクタでヒットするちゅうhtml要素がないため
nullにaddEventListenerしようとしているのだと思います

sample

javascript

1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const contents=document.querySelector('#contents'); 4 const addContent=()=>{ 5 var div = Object.assign(document.createElement('div'),{ 6 className:'content', 7 innerHTML:'<form><input class="mini-title" name="title" type="text" size="50" placeholder="タイトル"><br><textarea maxlength="300" placeholder="内容" class="mini-content"></textarea><br><span class="sub-title">※テキストが入ります。テキストが入ります。テキストが入りま</span><br><div class="submit-area"><br><input class="submit-btn" type="button" value="投稿する"></div></div></form>', 8 }); 9 contents.appendChild(div); 10 }; 11 const showContent_item=()=>{ 12 var div = Object.assign(document.createElement('div'),{ 13 className: 'content_item', 14 innerHTML:'<h2 class="item-title">test</h2>', 15 }); 16 contents.appendChild(div); 17 }; 18 const head_title = document.querySelector('#title'); 19 document.querySelector('.add-content-btn').addEventListener('click',e=>{ 20 addContent(); 21 const submit_btn = document.querySelector('.submit-btn'); 22 submit_btn.addEventListener('click', function() { 23 showContent_item(); 24 }); 25 e.target.style.display = 'none'; 26 }); 27}); 28</script> 29 30<div id="main"> 31 <div id="contents"> 32 </div> 33 <i class="fas fa-plus add-content-btn fa-3x">x</i> 34</div>

投稿2019/11/26 11:51

編集2019/11/26 12:03
yambejp

総合スコア114583

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

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

yambejp

2019/11/26 12:03

一部showContent_item()が何をやりたいかわからないので 適当に動作させています
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問