現在、「1度実行した後、再度計算が起動すると、エラーが発生し停止する。更新をしないと計算が起動しない。」という問題が発生しています。

1度実行した後、再度計算が起動すると、エラー「Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.」が出ます。

removeChildが1度起動しているため、（整数値を入力してください」）の文言が既に削除されており、2度目はremoveChildがを消すことができず、エラーになっているのだと解釈しました。

continueを使うのか等試行錯誤したのですが、どうも違うようです。ヒント等頂けばありがたいです。

index.html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>FizzBuzz問題</title>
6</head>
7<body>
8    <p>
9      FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください">
10    </p>  
11    <p>
12      BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください">
13    </p>
14    <button id="btn">実行</button>
15  <p>【出力】</p>
16  <p id="p">整数値を入力してください</p> 
17  <div id=result></div>
18  
19  <script>
20  'use strict';
21  {
22
23  const fizzForm = document.getElementById ('fizzInput');
24  const buzzForm = document.getElementById ('buzzInput');
25  const p = document.getElementById('p');
26
27  const btn = document.getElementById('btn');
28    btn.addEventListener('click', function() {
29      
30      document.body.removeChild(p);
31      
32      const fizzNum = parseFloat(fizzForm.value);
33      const buzzNum = parseFloat(buzzForm.value); 
34
35      if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum))
36      {
37        const result = document.getElementById('result');
38    result.innerHTML = "";    
39    for (let number = 1; number <= 100; number++) {
40
41      console.log(Number.isInteger(fizzNum));
42      console.log(Number.isInteger(buzzNum));
43
44      if(number % fizzNum === 0 && number % buzzNum   ===   0 ) 
45      {
46        const p = document.createElement('p');
47        p.textContent = ("FizzBuzz" + " "+ number);
48        result.appendChild(p);
49
50      } else if (number % fizzNum === 0) {
51        const p = document.createElement('p');
52        p.textContent = ("Fizz" + " " + number);
53        result.appendChild(p);
54
55      } else if (number % buzzNum  ===  0) {
56        const p = document.createElement('p');
57        p.textContent = ("Buzz" + " " + number);
58        result.appendChild(p);
59      }
60  }
61        
62        } else {
63          document.body.appendChild(p);
64          console.log(alert('エラーメッセージ「整数値 を入力してください」'));
65        }
66
67
68  });
69}
70  </script>
71</body>
72</html>

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

回答2件

ベストアンサー

デフォルトで存在する
「整数値を入力してください 」をbtnクリック時に削除していますよね？
一度削除されると2回目には存在しないノードを削除しようとするのでエラーになります

sample

ざっくり共通部分をまとめてみました

javascript
1<script>
2'use strict';
3window.addEventListener('DOMContentLoaded', ()=>{
4  const fizzForm = document.querySelector('#fizzInput');
5  const buzzForm = document.querySelector('#buzzInput');
6  const btn = document.querySelector('#btn');
7  const result = document.querySelector('#result');
8  btn.addEventListener('click', ()=>{
9    const fizzNum = parseFloat(fizzForm.value);
10    const buzzNum = parseFloat(buzzForm.value); 
11    result.textContent="";
12    if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum)){
13      for(var i = 1; i <= 100; i++) {
14        var txt="";
15        if(i % fizzNum === 0 && i % buzzNum === 0){
16          txt="FizzBuzz ";
17        } else if (i % fizzNum === 0) {
18          txt="Fizz ";
19        } else if (i % buzzNum  ===  0) {
20          txt="Buzz ";
21        }
22        if(txt) result.appendChild(Object.assign(document.createElement('p'),{textContent:txt+i}));
23      }
24    }else{
25      result.appendChild(Object.assign(document.createElement('p'),{textContent:"エラーメッセージ「整数値 を入力してください」"}));
26    }
27  });
28});
29</script>
30<p>
31FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください">
32</p>  
33<p>
34BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください">
35</p>
36<button id="btn">実行</button>
37<div id=result></div>

投稿2019/11/25 01:31

編集2019/11/25 01:51

yambejp

総合スコア116694

removeChildが1度起動しているため、（整数値を入力してください」）の文言が既に削除されており、2度目はremoveChildがを消すことができず、エラーになっているのだと解釈しました。

正しい解釈です。

ご質問のコードでは、イベントハンドラの外で p#p 要素(「整数値を入力してください」)を取得していますが、これをイベントハンドラ内で取得してはどうでしょう？

MDN getElementById() の「返値」に説明されているように、取得できなければ null　なので、切り分けできます。

javascript
1const fizzForm = document.getElementById ('fizzInput');
2const buzzForm = document.getElementById ('buzzInput');
3//const p = document.getElementById('p');
4
5const btn = document.getElementById('btn');
6
7btn.addEventListener('click', function() {
8
9  const p = document.getElementById('p'); // ここで getElementById() すれば
10  if(p) document.body.removeChild(p); // エラー回避できる
11
12  /* omitted */
13
14}