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

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

ただいまの
回答率

87.93%

値の算出方法について

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 274

score 105

前提・実現したいこと

JavaScriptにて、FizzBuzz問題の課題を行なっているのですが、うまく行かない部分があり質問させて貰いました。
実装に必要な要件は以下4点になります。

  • fizzNumに入力された値の倍数とbuzzNumに入力された値の倍数を小さい順に表示する
  • 各々倍数と一緒にfizz、buzzと表示させる
  • 両方の倍数である時にはfizzBuzzと表示させる
  • 表示させるのは二桁の値まで

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

現状ですと、100を超えているにも関わらず値が出力されてしまっており、「FizzBuzz」と表示されるべき部分が「Fizz」や「Buzz」の値として表示されてしまっています。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FizzBuzz</title>
</head>
<body>
  <h1>FizzBuzz問題</h1>
  <p>
    FizzNum:
    <input type="text" id="fizz_num">
  </p>
  <p>
    BuzzNum:
    <input type="text" id="buzz_num">
  </p>
  <input type="button" id="button" value="実行">
  <p id="tag_p">【出力】</p>
</body>
<script type="text/javascript" src="kadai-2.js"></script>
</html>
'use strict';
document.getElementById("button").onclick = function(){
  let fizz_num = document.getElementById("fizz_num").value;

  let buzz_num = document.getElementById("buzz_num").value;
  let fizz_num_err_msg = '';
  let buzz_num_err_msg = '';
  let empty_err = false;
  if(fizz_num === ''){
    fizz_num_err_msg = 'fizz_numの値を入力して下さい';
    empty_err = true;
  }
  if(buzz_num === ''){
    buzz_num_err_msg = 'buzz_numの値を入力して下さい';
    empty_err = true;
  }
  if(empty_err === false){
    fizz_num = Number(fizz_num);
    buzz_num = Number(buzz_num);
    // console.log(buzz_num)
    // console.log('ok')
    if(fizz_num){
      if(!Number.isInteger(fizz_num)){
        fizz_num_err_msg = 'FizzNumに整数を入力して下さい';
      }
    }else{
      fizz_num_err_msg = 'FizzNumに整数を入力して下さい';
    }
    if(buzz_num){
      console.log(buzz_num);
      if(!Number.isInteger(buzz_num)){
        buzz_num_err_msg = 'BuzzNumに整数を入力して下さい';
        // console.log(buzz_num_err_msg);
      }
    }else{
      buzz_num_err_msg = 'BuzzNumに整数を入力して下さい';
      // console.log(buzz_num_err_msg);
    }
    // console.log(buzz_num_err_msg);
  }
  console.log(buzz_num_err_msg);
  console.log(fizz_num_err_msg);
  if(!buzz_num_err_msg && !fizz_num_err_msg){
    // console.log('ok')
    let tag_p = document.getElementById("tag_p");
    let current_fizz_value = document.createTextNode(`Fizz: ${fizz_num}`);
    let current_buzz_value = document.createTextNode(`Buzz: ${buzz_num}`);
    tag_p.appendChild(document.createElement("BR"));
    tag_p.appendChild(current_fizz_value);
    tag_p.appendChild(document.createElement("BR"));
    tag_p.appendChild(current_buzz_value);

    var max_value = 0;
    var first_num = 0;
    var secound_num = 0;
    var fizz_buzz = 0
    const base_fizz_num = fizz_num;
    const base_buzz_num = buzz_num;
    let display_fizz_value = '';
    let display_buzz_value = '';
    let display_fizz_buzz_value = '';
    for(var i = 2; max_value < 100; i++){
      fizz_num = fizz_num * i;
      buzz_num = buzz_num * i;
      // console.log(fizz_num)
      if(buzz_num > fizz_num){
        // console.log('buzz_num > fizz_num')
        first_num = fizz_num;
        secound_num = buzz_num;
        if(secound_num % base_fizz_num == 0){
          display_fizz_value = document.createTextNode(`Fizz: ${first_num}`);
          display_fizz_buzz_value = document.createTextNode(`FizzBuzz: ${secound_num}`);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_fizz_value);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_fizz_buzz_value);
        }else{
          display_buzz_value = document.createTextNode(`Buzz: ${first_num}`);
          display_fizz_value = document.createTextNode(`Fizz: ${secound_num}`);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_buzz_value);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_fizz_value);
        }
      }else{
        // console.log('buzz_num <= fizz_num')
        first_num = buzz_num;
        secound_num = fizz_num;
        if(secound_num % base_buz_num == 0){
          display_buzz_value = document.createTextNode(`Buzz: ${first_num}`);
          display_fizz_buzz_value =document.createTextNode(`FizzBuzz: ${secound_num}`)
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_buzz_value);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_fizz_buzz_value);
        }else{
          display_fizz_value = document.createTextNode(`Fizz: ${first_num}`);
          display_buzz_value = document.createTextNode(`Buzz: ${secound_num}`);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_fizz_value);
          tag_p.appendChild(document.createElement("BR"));
          tag_p.appendChild(display_buzz_value);
        }
      }
      max_value = Math.max(first_num,secound_num);
      // console.log('max_value',max_value);
    }
  }

}

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

コードの方は、動作確認可能な形としてjsfiddleにアップロードしてある状況です
どなたか、ご助言の程頂けましたら幸いです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

とりあえず例外処理系の部分はあとから追加してください
コアな部分から始めた方がいいでしょう
first_numやmax_numの使い方もおかしくないですか?

一例

'use strict';
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector("#button").addEventListener('click',function(){
    const first_num = 1;
    const max_value = 100;
    let fizz_num = parseInt(document.querySelector("#fizz_num").value);
    let buzz_num = parseInt(document.querySelector("#buzz_num").value);
    let display_value="";
    let key="";
    for(var i = first_num; i <= max_value; i++){
      key="";
      if(i%fizz_num==0) key+="Fizz";
      if(i%buzz_num==0) key+="Buzz";
      if(key!==""){
        display_value = document.createTextNode(`${key}: ${i}`);
        tag_p.appendChild(document.createElement("BR"));
        tag_p.appendChild(display_value);
      }
    }
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/12/07 21:23

    時間があれば確認します。

    キャンセル

  • 2020/12/10 15:10

    少々、自分で試行錯誤していたのですが、なんとか自己解決することが出来ました。

    キャンセル

  • 2020/12/10 15:10 編集

    イベントリスナーを使用する部分など、参考になりました

    キャンセル

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る