前提・実現したいこと

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

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

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

JavaScript
1'use strict';
2{
3  // DOM要素
4  const input = document.getElementById('add-value');
5  const addBtn = document.getElementById('add-btn');
6  const ul = document.getElementById('add-list');
7  const allClear = document.getElementById('all-clear');
8  
9
10  // リストが追加される関数
11  const addList = () => {
12    const addValue = input.value;
13    const addTask = `<li class="item">
14                      <p class="item-inner">${addValue}</p>
15                      <button class="check-btn"><i class="fas fa-check"></i></button>
16                    </li>`;
17    if(addValue !== '') {
18      ul.insertAdjacentHTML('beforeend', addTask);
19    }
20    document.listform.reset();
21  }
22
23  // 追加ボタンを押した時の挙動
24  addBtn.addEventListener('click', () => {
25    addList();
26  });
27
28  // チェックボタンを押した時の挙動
29  
30  
31  
32  
33  // タスクを全削除したときの挙動
34  allClear.addEventListener('click', () => {
35    const removeAll = confirm('全消去してもよろしいですか？');
36
37    if (removeAll) {
38      while(ul.lastChild) {
39        ul.removeChild(ul.lastChild);
40      }
41    } else {
42      alert('キャンセルしました');
43    }
44  });
45
46
47}

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

エラーメッセージ

該当のソースコード

JavaScript
1 const addList = () => {
2    const addValue = input.value;
3    const addTask = `<li class="item">
4                      <p class="item-inner">${addValue}</p>
5                      <button class="check-btn"><i class="fas fa-check"></i></button>
6                    </li>`;
7    if(addValue !== '') {
8      ul.insertAdjacentHTML('beforeend', addTask);
9    }
10    document.listform.reset();
11  }

試したこと

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

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

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

int32_t

2021/03/21 23:30

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

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

回答2件

ベストアンサー

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

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

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

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

js
1  document.addEventListener('click', function(e) {
2    if (e.target && e.target.classList.contains('check-btn')) {
3      alert('check-btn Click');
4    }
5  });

投稿2021/03/22 02:05

編集2021/03/23 02:34

hatena19

総合スコア33797

yambejp

2021/03/22 02:27

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

kam__0141

2021/03/22 09:28

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

babu_babu_baboo

2021/03/22 09:34

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

hatena19

2021/03/23 02:31

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

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

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

sample

javascript
1<button class="check-btn">test1</button>
2<button class="check-btn"><span>test2</span></button>
3<script>
4document.addEventListener('click',e=>{
5  const t=e.target.closest('.check-btn');
6  if(t){
7    console.log(t.textContent);
8  }
9});
10window.addEventListener('DOMContentLoaded',()=>{
11  const test=`<button class="check-btn">test3</button>\n<button class="check-btn"><span>test4</span></button>`;
12  document.querySelector('#hoge').insertAdjacentHTML('beforeend', test);
13});
14</script>
15<div id="hoge">hoge</div>