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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1152閲覧

fizzbuzzを一度実行した後、再度実行した際、表示が切り替わらない

asako1010

総合スコア50

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/19 14:27

編集2019/11/19 15:05

【現在の状況】
①フォームに数字を入れて実行ボタンを押す→
②その後、続けて、新しく数字を入力し再度実行ボタンを押す→
③表示が切り替わらず、計算ができない(一度更新しないと計算できない)

【目標】
①フォームに数字を入れて実行ボタンを押す→
②その後、続けて、新しく数字を入力し再度実行ボタンを押す→
③画面が切り替わり、数字を計算できる(更新せずとも、計算ができる)

リンク内容

ただ、「fizzbuzzを一度実行した後、再度実行した際に表示を切り替える」動作をするためにどういうコードを使うべきか、ググってみたのですが見つかりません。
「計算 上書き Javascript」「画面 切り替え Javascript」「実行 切り替え javascript」など色々ググってみたのですが、ヒットせず。

今回の事例(「fizzbuzzを一度実行した後、再度実行した際に表示を切り替える」)とドットインストールの割勘アプリに出てくる機能が似ていると感じました。
https://dotinstall.com/lessons/go_dutch_js_v2/33906
http://samples.dotinstall.com/s/go_dutch_js_v2/33906/
「innerHTML」かなと思ったのですが、別の事例のようにも感じます。

<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> ​ <script> 'use strict'; { const fizzForm = document.getElementById ('fizzInput'); const buzzForm = document.getElementById ('buzzInput'); const btn = document.getElementById('btn'); btn.addEventListener('click', function() { const fizzNum = parseFloat(fizzForm.value); const buzzNum = parseFloat(buzzForm.value); if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) { } else { console.log(alert('エラーメッセージ「整数値を入力してください」')); } 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); document.body.appendChild(p); } else if(number % fizzNum === 0) { const p = document.createElement('p'); p.textContent = ("Fizz" + " " + number); document.body.appendChild(p); } else if(number % buzzNum === 0) { const p = document.createElement('p'); p.textContent = ("Buzz" + " " + number); document.body.appendChild(p); } } }); } </script> </body> </html> コード

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/11/19 14:28

URLはマークダウンのリンク機能を利用してご提示ください。
kei344

2019/11/19 14:33

「切り替える」とは何でしょう。具体的に何をどうするかを質問文に追記してください。
guest

回答2

0

ベストアンサー

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

HTML

1 2<p>FizzNum: <input type="text" id="fizzInput" value="" placeholder ="整数値を入力してください"></p> 3<p>BuzzNum:<input type="text" id="buzzInput" value="" placeholder ="整数値を入力してください"></p> 4<button id="btn">実行</button> 5<p>出力</p> 6<p>整数値を入力してください</p> 7<div id=result></div> <!-- 追加 --> 8

JS

1 2'use strict'; 3 { 4 const fizzForm = document.getElementById ('fizzInput'); 5 const buzzForm = document.getElementById ('buzzInput'); 6 const btn = document.getElementById('btn'); 7 btn.addEventListener('click', function() { 8 9 const fizzNum = parseFloat(fizzForm.value); 10 const buzzNum = parseFloat(buzzForm.value); 11 12 if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum)) 13 { 14 15 } else { 16 console.log(alert('エラーメッセージ「整数値を入力してください」')); 17 } 18 var result = document.getElementById('result'); //追加 19 result.innerHTML = ""; //追加 20 for (let number = 1; number <= 100; number++) { 21 22 console.log(Number.isInteger(fizzNum)); 23 console.log(Number.isInteger(buzzNum)); 24 25 if(number % fizzNum === 0 && number % buzzNum === 0) { 26 const p = document.createElement('p'); 27 p.textContent = ("FizzBuzz" + " "+ number); 28 result.appendChild(p); //修正 29 30 } else if(number % fizzNum === 0) { 31 const p = document.createElement('p'); 32 p.textContent = ("Fizz" + " " + number); 33 result.appendChild(p); //修正 34 35 } else if(number % buzzNum === 0) { 36 const p = document.createElement('p'); 37 p.textContent = ("Buzz" + " " + number); 38 result.appendChild(p); //修正 39 } 40 } 41 42 43 }); 44 } 45

サンプル

こんな感じでしょうか?

投稿2019/11/20 12:36

編集2019/11/20 12:37
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako1010

2019/11/20 14:26

ご対応ありがとうございます。 助かります。
guest

0

  1. document.body.appendChild(p);ではなく、「特定の要素内」に出力するようにする
  2. 「再度実行ボタンを押す」時に「特定の要素内」を削除してからはじめる

投稿2019/11/19 15:09

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asako1010

2019/11/19 16:25

ありがとうございます。 いただいた情報を基に考えます。
asako1010

2019/11/20 07:43

すみません。 今回はjqueryやremoveを使うのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問