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

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

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

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

<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>
コード

上記のコードを修正。

を<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>
コード

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

失礼しました。

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

回答2件

ベストアンサー

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

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

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

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

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

事例が違うため

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

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

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

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

投稿2019/11/23 08:03

AkitoshiManabe

総合スコア5432

asako1010

2019/11/23 13:14

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

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

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

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

投稿2019/11/22 16:22

kei344

総合スコア69407

asako1010

2019/11/22 16:38

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

kei344

2019/11/22 17:05

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

asako1010

2019/11/23 13:14

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

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

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

関連した質問