Q&A
プログラミング初心者です。
insertBeforeを使って、h3「IDコメント 状態」の下にフォームに入力した文字をリスト形式に設置したいのですが、うまくいきません。
以下のエラーが出ます。
message: "h3 is not defined" stack: "ReferenceError: h3 is not defined
h3が定義されていないというのは、
h3はhtmlではなく、script上(js上)にないといけないという意味なのでしょうか？
InsertBeforeを
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ToDoリスト</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>ToDoリスト</h1> <label><input type="radio" name="phone">すべて</label> <label><input type="radio" name="phone" >作業中</label> <label><input type="radio" name="phone">完了中</label> <h3>IDコメント 状態</h3> <h2>新規タスクの追加</h2> <p> <input type="text" id="id_text" value=""> <button id="btn" type="btn"> 追加</button> </p> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const text = document.getElementById('id_text').value; document.body.insertBefore(text, h3); }); </script> </body> </html>
h3を定義したところ、以下のエラーが出ました。
TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
「textの部分はNodeじゃないとダメ」という意味だと思うのですが、どう言い換えればいいのかが分かりません。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ToDoリスト</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1>ToDoリスト</h1> <label><input type="radio" name="phone">すべて</label> <label><input type="radio" name="phone" >作業中</label> <label><input type="radio" name="phone">完了中</label> <h3 id="id_h3">IDコメント 状態</h3> <h2>新規タスクの追加</h2> <p> <input type="text" id="id_text" value=""> <button id="btn" type="btn"> 追加</button> </p> <script> const btn = document.getElementById('btn'); btn.addEventListener('click', () => { const text = document.getElementById('id_text').value; const h3 = document.getElementById('id_h3'); document.body.insertBefore(text, h3); }); </script> </body> </html>
回答2件
0
エラーの内容どおりですが、h3なんて変数を用意していないからです。
投稿2019/11/27 15:18
総合スコア69596
0
ベストアンサー
h3を定義したところ、以下のエラーが出ました。
TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
insertBeforeはノードでの挿入なのでテキストは挿入できません
こうしてください
javascript
1 document.body.insertBefore(document.createTextNode(text), h3);
投稿2019/11/28 01:23
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/27 15:23
2019/11/27 15:26
2019/11/27 17:26
2019/11/27 17:33