同一のボタンでinnnerhtmlを追加・削除したい

前提・実現したいこと

JavaScriptを使って自由に値が入力可能なFizzBuzzアプリを作成しています。
実現したい内容は1度計算結果を表示し、値を再入力した時に前回計算した結果の表示を削除して、新たな計算結果を表示することです。
上の処理を同一の実行ボタンで行いたいのですが追加した要素の削除の仕方がわかりません。

私が試した解決策は
①innnerhtmlに空文字('')を入れる
②remove()を使う

2点の解決策を自分なりにコードを書いてみて実行しましたが、そもそも解決策の方向性が間違っているのかコードの処理の流れに問題があるのかさえ不明な状態です。

初学者であるため初歩的な質問で大変恐縮ではありますが、理由など一緒に添えて回答頂けますと幸いです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

JavaScript
1'use strict';
2
3{
4  // Fizz Buzz計算式
5  document.querySelector('button').addEventListener('click', () => {
6    
7    for(let i = 1; i < 101; i++) {
8
9      // inputに入力された値を代入
10      let form1 = document.getElementById('fizznumber');
11      let fizz =  form1.value;
12      let form2 = document.getElementById('buzznumber');
13      let buzz =  form2.value;
14
15      let x = fizz;
16      let y = buzz; 
17
18      // documentに計算結果を表示する
19      let output =  document.getElementById('output');
20      let div = document.createElement('div');
21      let result = output.appendChild(div);
22  
23      // 計算式
24      if (!isNaN(x) && !isNaN(y)) { // 数字かどうか調べる
25        if (i % (x * y) === 0) {
26          result.innerHTML = `fizzBuzz${i}`;
27        } else if (i % x === 0) {
28          result.innerHTML = `fizz${i}`;
29        } else if (i % y === 0) {
30          result.innerHTML = (`Buzz${i}`);
31        }
32      } else {
33        result.innerHTML = '数字を入力して下さい';
34        return
35      }
36    }
37  });
38}

試したこと

①

JavaScript
1  document.querySelector('button').addEventListener('click', () => {
2    if (result.innerHTML === '') {
3      fizzbuzz();
4      
5    } else {
6      result.innerHTML === ''
7      fizzbuzz();
8    }
9  });

②

JavaScript
1document.querySelector('button').addEventListener('click', () => {
2    if (result.innerHTML === '') {
3
4      fizzbuzz();
5      
6    } else {
7      result.remove();
8      fizzbuzz();
9    }
10  });

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

let outputのinnerHTMLを""にするのが単純で良いと思います。
remove()でも大丈夫なはずですが色々と面倒なので前者をお勧めします。

サンプル

JS
1
2'use strict';
3
4{
5  // Fizz Buzz計算式
6  document.querySelector('button').addEventListener('click', () => {
7    
8    document.getElementById('output').innerHTML = ""; //<-追加
9    for(let i = 1; i < 101; i++) {
10
11      // inputに入力された値を代入
12      let form1 = document.getElementById('fizznumber');
13      let fizz =  form1.value;
14      let form2 = document.getElementById('buzznumber');
15      let buzz =  form2.value;
16
17      let x = fizz;
18      let y = buzz; 
19
20      // documentに計算結果を表示する
21      let output =  document.getElementById('output');
22      let div = document.createElement('div');
23      let result = output.appendChild(div);
24
25      // 計算式
26      if (!isNaN(x) && !isNaN(y)) { // 数字かどうか調べる
27        if (i % (x * y) === 0) {
28          result.innerHTML = `fizzBuzz${i}`;
29        } else if (i % x === 0) {
30          result.innerHTML = `fizz${i}`;
31        } else if (i % y === 0) {
32          result.innerHTML = (`Buzz${i}`);
33        }
34      } else {
35        result.innerHTML = '数字を入力して下さい';
36        return
37      }
38    }
39  });
40}
41

diff
1
2'use strict';
3
4{
5  // Fizz Buzz計算式
6  document.querySelector('button').addEventListener('click', () => {
7    
8+   document.getElementById('output').innerHTML = ""; //<-追加
9    for(let i = 1; i < 101; i++) {
10
11      // inputに入力された値を代入
12      let form1 = document.getElementById('fizznumber');
13      let fizz =  form1.value;
14      let form2 = document.getElementById('buzznumber');
15      let buzz =  form2.value;
16
17      let x = fizz;
18      let y = buzz; 
19
20      // documentに計算結果を表示する
21      let output =  document.getElementById('output');
22      let div = document.createElement('div');
23      let result = output.appendChild(div);
24
25      // 計算式
26      if (!isNaN(x) && !isNaN(y)) { // 数字かどうか調べる
27        if (i % (x * y) === 0) {
28          result.innerHTML = `fizzBuzz${i}`;
29        } else if (i % x === 0) {
30          result.innerHTML = `fizz${i}`;
31        } else if (i % y === 0) {
32          result.innerHTML = (`Buzz${i}`);
33        }
34      } else {
35        result.innerHTML = '数字を入力して下さい';
36        return
37      }
38    }
39  });
40}
41