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

Question

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

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

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

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

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

<div id="main">
        <div id="contents">


        </div>
        <i class="fas fa-plus add-content-btn fa-3x"></i>
    </div>

document.addEventListener('DOMContentLoaded', function() {
    const head_title = document.getElementById('title');
    const submit_btn = document.querySelector('.submit-btn');

const add_btn = document.querySelector('.add-content-btn').addEventListener('click', function() {
    addContent();
    this.style.display = 'none';
},false);



submit_btn.addEventListener('click', function() {
    showContent_ite();
},false);


function addContent() {
    let div = document.createElement('div');
    div.className= 'content';
    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>';
    let contents = document.getElementById('contents');
    contents.appendChild(div);
}

function showContent_item() {
    let div = document.createElement('div');
    div.className= 'content_item';
    div.innerHTML = '<h2 class="item-title"></h2>';
    content_item.appendChild(div);


}

Answer 1

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

sample

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const contents=document.querySelector('#contents');
  const addContent=()=>{
    var div = Object.assign(document.createElement('div'),{
    className:'content',
    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>',
    });
    contents.appendChild(div);
  };
  const showContent_item=()=>{
    var div = Object.assign(document.createElement('div'),{
    className: 'content_item',
    innerHTML:'<h2 class="item-title">test</h2>',
    });
    contents.appendChild(div);
  };
  const head_title = document.querySelector('#title');
  document.querySelector('.add-content-btn').addEventListener('click',e=>{
    addContent();
    const submit_btn = document.querySelector('.submit-btn');
    submit_btn.addEventListener('click', function() {
      showContent_item();
    });
    e.target.style.display = 'none';
  });
});
</script>

<div id="main">
  <div id="contents">
  </div>
  <i class="fas fa-plus add-content-btn fa-3x">x</i>
</div>

Comments

[yambejp]

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