appendChildでのエラーの解決

前提

JavaScriptでのtodoリストの作成をしたいです。
そのうちのフォームに文字を入力してその文字をtodo一覧に追加する過程でのエラーです。
おそらくはappendChildで生成したタグとそのタグがあるクラスの配下置かれる処理で前後が逆転していることが原因だと思います。ですが、原因がわからないためアドバイスをお願いしたいです。

実現したいこと

フォームに文字を入力してその文字をtodo一覧に追加したい

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

 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

該当のソースコード

<body class="container">
  <div class="input-area">
    <input id="add-text" placeholder="TODOを入力">
    <button id="add-button">追加</button>
  </div>
<div class="imcompleted-area">
    <p class="title">未完了のtodo</p>
    <ul class="list-low">
      <li>TODOです</li>
      <button>完了</button>
      <button>削除</button>
    </ul>
  </div>
  <div class="completed-area">
    <p class="title">完了したtodo</p>
    <ul class="list-low">
      <li>todoでした</li>
      <button>戻す</button>
    </ul>
  </div>
  <script src="./main.js"></script>
</body>

document.getElementById('add-button').addEventListener('click', () =>  onClickedAdd());

const onClickedAdd = () => {
  const inputText = document.getElementById('add-text').value;
  document.getElementById('add-text').value = '';

  const addDiv = document.createElement('div');
  addDiv.className = 'list-low';

  const addLi = document.createElement('li');
  addLi.inputText = inputText;
  addDiv.appendChild(addLi);

  document.getElementsByClassName('imcompleted-area').appendChild(addDiv);
};

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

回答2件

js
1document.getElementsByClassName('imcompleted-area').appendChild(addDiv);

↓

js
1 document.getElementsByClassName('imcompleted-area')[0].appendChild(addDiv);

こうですかね。。。

投稿2023/01/24 06:47

ypp

総合スコア66

document.getElementsByClassName('imcompleted-area')で得られるのはHTMLCollectionですのでappendChildはできません。imcompleted-areaというクラスを持つ先頭のHTML要素にappendすればいいだけなら

javascript
1document.querySelector('.imcompleted-area').appendChild()

としてください
それ以外の部分もだいぶおかしいですけどね・・・

投稿2023/01/23 13:42

yambejp

総合スコア114769

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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