質問させていただきます。
上記の目標物の通り、実行ボタンを押したら、<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> コード
回答2件
あなたの回答
tips
プレビュー