jsに直接書いたhtmlの要素を取得したい

Question

前提・実現したいこと

JavaScriptで簡易的なTodo Listを作っています

jsに直接書いたhtmlタグの要素を取得したいのですがなかなかできません。

addTaskと定義してあるjsに直接書いたhtmlのpタグとbuttonタグの要素を取得したい

'use strict';
{
  // DOM要素
  const input = document.getElementById('add-value');
  const addBtn = document.getElementById('add-btn');
  const ul = document.getElementById('add-list');
  const allClear = document.getElementById('all-clear');
  

  // リストが追加される関数
  const addList = () => {
    const addValue = input.value;
    const addTask = `<li class="item">
                      <p class="item-inner">${addValue}</p>
                      <button class="check-btn"><i class="fas fa-check"></i></button>
                    </li>`;
    if(addValue !== '') {
      ul.insertAdjacentHTML('beforeend', addTask);
    }
    document.listform.reset();
  }

  // 追加ボタンを押した時の挙動
  addBtn.addEventListener('click', () => {
    addList();
  });

  // チェックボタンを押した時の挙動
  
  
  
  
  // タスクを全削除したときの挙動
  allClear.addEventListener('click', () => {
    const removeAll = confirm('全消去してもよろしいですか？');

    if (removeAll) {
      while(ul.lastChild) {
        ul.removeChild(ul.lastChild);
      }
    } else {
      alert('キャンセルしました');
    }
  });


}

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

 const addList = () => {
    const addValue = input.value;
    const addTask = `<li class="item">
                      <p class="item-inner">${addValue}</p>
                      <button class="check-btn"><i class="fas fa-check"></i></button>
                    </li>`;
    if(addValue !== '') {
      ul.insertAdjacentHTML('beforeend', addTask);
    }
    document.listform.reset();
  }

試したこと

getElements系など要素の取得をするものは一通り試しました
結果,undefinedになってしまいます

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[int32_t]

このコードのどこで要素を取得したくて、どういうコードを書いて失敗したのか書いてください。

Answer 1

他の方の回答のコメントより

check-btnというclassがついたbuttonをクリックするとcssに書いたスタイルが反映するっていうことがしたくて、まずbuttonを定数で定義したいのですが、getElements系で指定しても動かなかったので、質問させていただきました

.check-btn というのは insertAdjacentHTML で後から動的に追加した要素です。
最初の読み込み時に存在しないものですので、最初に定数で定義しても意味ないです。
insertAdjacentHTML で追加した後に、追加した.check-btnに対して、addEventListenerでイベントを設定するか、追加するHTMLにonclick属性を記述するとかするといいでしょう。

あるいは、documentのクリックでどこをクリックしたかを判定する方法もあります。

  document.addEventListener('click', function(e) {
    if (e.target && e.target.classList.contains('check-btn')) {
      alert('check-btn Click');
    }
  });

Comments

[yambejp]

hatena19さんの回答で理解しました。
ただし内側にHTML要素があると合致しなくなるのでご注意ください

[kam__0141]

ご回答ありがとうございます。試してみたところalertが反映されてイベントの操作ができるようになりました。私の説明が不十分で申し訳ないのですが、check-btnを押したときにinsertAdjacentHTML で後から動的に追加した要素であるp要素のitem-innerにcssで設定したスタイルを反映させるという処理を行いたいのですがやり方がわからずにいる状態です。ご教授いただけますと幸いです。

[babu_babu_baboo]

引数の変数 e が脳内変換で event という変数名に勝手に変化してますよ！
hatena19 さん

[hatena19]

babu_babu_babooさん、ご指摘ありがとうございます。
コードを修正しておきます。

Answer 2

classがitemのliが該当するdomになりますが、なにか特殊なことをしたいのですか？

sample

<button class="check-btn">test1</button>
<button class="check-btn"><span>test2</span></button>
<script>
document.addEventListener('click',e=>{
  const t=e.target.closest('.check-btn');
  if(t){
    console.log(t.textContent);
  }
});
window.addEventListener('DOMContentLoaded',()=>{
  const test=`<button class="check-btn">test3</button>\n<button class="check-btn"><span>test4</span></button>`;
  document.querySelector('#hoge').insertAdjacentHTML('beforeend', test);
});
</script>
<div id="hoge">hoge</div>

Comments

[kam__0141]

ご意見ありがとうございます。check-btnというclassがついたbuttonをクリックするとcssに書いたスタイルが反映するっていうことがしたくて、まずbuttonを定数で定義したいのですが、getElements系で指定しても動かなかったので、質問させていただきました

[yambejp]

> getElements系で指定しても動かなかった

単純に参照した時点で当該DOMが宣言されていないだけでは？
同スクリプトをHTML内のなるべく後ろの方で実行するか
DOMContentLoadedなどでDOM形成をまって実行してください

[yambejp]

失礼しました。
hatena19さんのご指摘をみて勘違いに気づきました
sample追加しておきました。
最初からあるものでも、あとから追加したものでも反応します