🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

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

Q&A

解決済

2回答

1390閲覧

removeChild の起動のさせ方が分かりません。

asako1010

総合スコア50

JavaScript

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

0グッド

0クリップ

投稿2019/11/22 15:58

編集2019/11/22 16:47

質問させていただきます。

目標物

上記の目標物の通り、実行ボタンを押したら、<p>の「整数値を入力してください」の要素を削除したく、以下の通り、
コードを書いたのですが、うまくいきません。

調べたところ、
【実行ボタンを押したら、要素の削除「removeChild」が起動 → <p>の「整数値を入力してください」の要素を削除】
という流れにすればいいだろうというメドは着いたのですが、その先が進みません。

<html lang="ja"> <head> <meta charset="utf-8"> <title>FizzBuzz問題</title> </head> <body> <p> FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"> </p> <p> BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"> </p> <button id="btn">実行</button> <p>【出力】</p> <p>整数値を入力してください</p> <div id=result></div> <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const p = document.getElementById('p'); document.body.removeChild(p); const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) { } else { console.log(alert('エラーメッセージ「整数値 を入力してください」')); } const result = document.getElementById('result'); result.innerHTML = ""; for (let number = 1; number <= 100; number++) { console.log(Number.isInteger(fizzNum)); console.log(Number.isInteger(buzzNum)); if(number % fizzNum === 0 && number % buzzNum === 0 ) { const p = document.createElement('p'); p.textContent = ("FizzBuzz" + " "+ number); result.appendChild(p); } else if (number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); result.appendChild(p); } else if (number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); result.appendChild(p); } } }); } </script> </body> </html> コード

上記のコードを修正。

<p>を<div>に変更し、idを付けました。

結果、以下のエラーが発生しました。

Uncaught

1index.html:33 at HTMLButtonElement.<anonymous> 2コード

以下のURLのように似たような問題に出会っている人は多いのですが、事例が違うため、なかなか解決に至りません。
https://teratail.com/questions/132537

<html lang="ja"> <head> <meta charset="utf-8"> <title>FizzBuzz問題</title> </head> <body> <p> FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"> </p> <p> BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"> </p> <button id="btn">実行</button> <p>【出力】</p> <div id>整数値を入力してください</div> <div id=result></div> <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const div = document.getElementById('div'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { document.body.removeChild(div); const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) { } else { console.log(alert('エラーメッセージ「整数値 を入力してください」')); } const result = document.getElementById('result'); result.innerHTML = ""; for (let number = 1; number <= 100; number++) { console.log(Number.isInteger(fizzNum)); console.log(Number.isInteger(buzzNum)); if(number % fizzNum === 0 && number % buzzNum === 0 ) { const p = document.createElement('p'); p.textContent = ("FizzBuzz" + " "+ number); result.appendChild(p); } else if (number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); result.appendChild(p); } else if (number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); result.appendChild(p); } } }); } </script> </body> </html> コード

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/23 01:55

回答依頼いただいていますが、既についた回答で充分解決可能と判断できますので、回答は差し控えさせていただきます。
asako1010

2019/11/23 13:14

回答ありがとうございます。
m.ts10806

2019/11/23 19:15

こちら回答ではないので(他にお断り入れられるところがないので追記修正依頼欄をコメントとして使ってます)
asako1010

2019/11/24 12:53

失礼しました。
guest

回答2

0

ベストアンサー

<p>の「整数値を入力してください」の要素を削除したく

削除したい DOM要素(P)の取得ができていません。
HTMLでは <p id>...</p> とid属性を持たせていますが id="value" と属性値が与えられていません。

最初に表示する「ヒント」なので、id属性の属性値は "hint" とする例です

HTML

1<p id="hint">整数値を入力してください</p>

javascript

1const p = document.getElementById("hint");

事例が違うため

1)DOM要素を取得して、2)親要素から削除する。という手順は全く同じです。

よく使われる DOM要素を取得するメソッド の違いも確認しましょう。

  1. Element.getElementById() ... 1つの要素を取得 / id属性値
  2. Element.getElementsByTagName() ... 複数の要素を取得 / 要素名
  3. Element.getElementsByClassName() ... 複数の要素を取得 / class
  4. Element.querySelector() ... 1つの要素を取得 / セレクタ
  5. Element.querySelectorAll() ... 複数の要素を取得 / セレクタ

getElementById() でDOM要素を取得するには、id 属性値が必要 です。

投稿2019/11/23 08:03

AkitoshiManabe

総合スコア5434

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako1010

2019/11/23 13:14

分かりやすい回答ありがとうございます。 問題が解決しました。
guest

0

下記コードはpというIDを付与された要素を探していますが、提示されたHTML内には当該要素が有りません。

js

1const p = document.getElementById('p');

投稿2019/11/22 16:22

kei344

総合スコア69596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako1010

2019/11/22 16:38

ありがとうございます。 修正します。
kei344

2019/11/22 17:05

下記コードはdivというIDを付与された要素を探していますが、提示されたHTML内には当該要素が有りません。 const div = document.getElementById('div'); タグと属性は違います。<p id="p"></p> ←これがID属性「p」が付与された要素です。
asako1010

2019/11/23 13:14

回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問