htmlで2つのテキストボックスを作成し、それぞれ、数値を入れ、実行ボタンを押すと、
"結果表示"の部分が消えて、入力した数値の2倍、3倍の数値が表示される機能を作りたいのですが、
実行ボタンを押すと、"結果表示"が消えて、そのまま空白になってしまいます。
どのようにすれば、計算結果が表示されるのか、教えて頂けると助かります。
html
1 <section class="input"> 2 <h1>FizzBuzz問題</h1> 3 4 <div> 5 <label>FizzNum:</label> 6 <input type="text" id="fizzInput" name="fizzInput" size="25" value="" placeholder="整数値を入力してください"> 7 </div> 8 <div> 9 <label>BuzzNum:</label> 10 <input type="text" id="buzzInput" name="buzzInput" size="25" value="" placeholder="整数値を入力してください"> 11 </div> 12 13 <button type="button" name="pushButton">実行</button> 14 15 <p>【出力】</p> 16 </section> 17 <section class="output"> 18 <p>結果表示</p> 19 </section>
javaScript
1 //idがfizzInput,buzzInputのInput要素を取得 2 let fizzInput = document.getElementById('fizzInput'); 3 let buzzInput = document.getElementById('buzzInput'); 4 5 //取得したinput要素の入力値を取得して、倍がけする 6 let fizzInputValue = fizzInput.value * 2; 7 let buzzInputValue = buzzInput.value * 3; 8 9 //ボタンの要素を取得 10 let btn = document.querySelector('button'); 11 12 // pの要素を取得 13 let elem = document.querySelector('.output p'); 14 15 //実行キーを押す 16 btn.addEventListener('click', () => { 17 elem.innerText = 'fizz x 2の結果:' + fizzInputValue; 18 elem.innerText = 'buzz x 3の結果:' + buzzInputValue; 19 });
> 空白になってしまいます
どこがでしょうか。
説明不足申し訳ありません。
実行ボタンを押した時、文中の"結果表示"が消えるまでは良いのですが、
その後の、計算結果の表示が出てきません。
対象ブラウザは何ですか? IE11 では使えなくて良いのですか?
対象ブラウザはgoogle Chromeでお願いします。
> elem.innerText = 'fizz x 2の結果:' + fizzInputValue;
> elem.innerText = 'buzz x 3の結果:' + buzzInputValue;
リスナの中の上記コードは何をしたいのですか?
解決しました。 ありがとうございます。
質問する際に気をつけるべきポイント、勉強させて頂きました。
回答2件
あなたの回答
tips
プレビュー