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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

getElementByIdでHTMLの要素が取得できない

rota6
rota6

総合スコア1

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0リアクション

0クリップ

808閲覧

投稿2022/08/03 13:08

編集2022/08/03 13:09

前提

エンジニア駆け出しです。
JavaScriptで簡単なToDoアプリを作っています。
リストを新規で追加する機能を実装しようとしていて、JSでHTMLのタグを生成したところまではいいのですが、なぜかgetElementByIdで指定したidがnullになってしまうので、解決方法が知りたいです。よろしくお願いします。

実現したいこと

リスト追加機能を動作するようにする

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

document.getElementById("incomplete-list").appendChild(div);でエラーが出てしまいます

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

該当のソースコード

JavaScript

import "./styles.css"; const onClickAdd = () => { //テキストボックスの値を取得し、初期化する const inputText = document.getElementById("add-text").value; document.getElementById("add-text").value = ""; // div生成 const div = document.createElement("div"); div.className = "list-row"; // liタグ生成 const li = document.createElement("li"); li.innerText = inputText; //button(完了)タグを生成 const completeButton = document.createElement("button"); completeButton.innerText = "完了"; completeButton.addEventListener("click", () => { alert("完了"); }) //button(削除)タグ生成 const deleteButton = document.createElement("button"); deleteButton.innerText = "削除"; deleteButton.addEventListener("click", ()=>{ alert("削除"); }); // divタグの子要素に各要素を指定 div.appendChild(li); div.appendChild(completeButton); div.appendChild(deleteButton); // console.log(div); //未完了リストに追加 document.getElementById("incomplete-list").appendChild(div); //.appendChild(div); }; document .getElementById("add-button") .addEventListener("click", () => onClickAdd());

HTML

<!DOCTYPE html> <html> <link rel="stylesheet" href="src/styles.css" /> <head> <title>todo list</title> <meta charset="UTF-8" /> </head> <body> <div class="input-area"> <input id="add-text" placeholder="TODOを入力" /> <button id="add-button">追加</button> </div> <div class="imcomplete-area"> <p class="title">未完了のTODO</p> <ul id="incomplete-list"> <div class="list-row"> <li>TODOです</li> <button>完了</button> <button>削除</button> </div> <div class="list-row"> <p>TODOです</p> <button>完了</button> <button>削除</button> </div> </ul> </div> <div class="complete-area"> <p class="title">完了したTODO</p> <ul> <li> <div class="list-row"> <p>TODOでした</p> <button>戻す</button> </li> </ul> </div> <script src="src/index.js"></script> </body> </html>

cssは省略しています。

試したこと

console.log(!!document.getElementById("incomplete-list"));

でfalseが返ってきたので、idが取得できていないことがおそらく原因なのは分かりました。

HTMLの読み込み順を考慮してJSを読み込むコードをbodyタグの最後に書きましたが、idは取得できませんでした。

また、window.onload = function(){onClickAdd}を試してみましたが、なぜか動きませんでした。

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

開発環境はCodeSandboxです。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

otn

2022/08/04 02:08

・全角空白が簡単に入力出来ないようにIME設定を変える(必須) ・全角空白が目で確認できるエディターを使う(可能な限り。上記設定してあれば必須では無いが)

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。