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

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

ただいまの
回答率

87.59%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 530

score 50

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

目標物

上記の目標物の通り、実行ボタンを押したら、<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を付けました。

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

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

以下の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>
コード
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/11/23 10:55

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

    キャンセル

  • asako1010

    2019/11/23 22:14

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

    キャンセル

  • m.ts10806

    2019/11/24 04:15

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

    キャンセル

  • asako1010

    2019/11/24 21:53

    失礼しました。

    キャンセル

回答 2

checkベストアンサー

+2

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

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

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

<p id="hint">整数値を入力してください</p>
const 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 22:14

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/23 01:38

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

    キャンセル

  • 2019/11/23 02:05

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

    タグと属性は違います。<p id="p"></p> ←これがID属性「p」が付与された要素です。

    キャンセル

  • 2019/11/23 22:14

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

    キャンセル

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

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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