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

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

ただいまの
回答率

87.81%

undefinedを非表示にしたい

解決済

回答 3

投稿 編集

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

score 1

前提・実現したいこと

オノマトペを連続して出し、音ごとに区切りたいのですが、実行した際に「underfined」が文字と記号の間に入ってきてしまいました。
「underfined」を非表示にする方法を教えていただけませんか?

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

ゴロundefined:ポタundefined:ゴロゴロゴロundefined:コンundefined:コンコンundefined

該当のソースコード

ここに言語を入力
<body>
    <script>
        //オノマトペ
        var array = new Array(6);
        array[0] = "ポツ";
        array[1] = "ザーッ";
        array[2] = "ボタ";
        array[3] = "ポタ";
        array[4] = "ゴロ";
        array[5] = "コン";

        //ランダム回数同じ音を発生させる
        function rnzk() {
            var rnzk = (array[Math.floor(Math.random() * array.length)]);
            var k = Math.floor(Math.random() * 5) + 1;//1~5をランダムでだす
            for (var i = k; i <= 5; i++) {
                // 1~5個同じ音が発生する
                document.write(rnzk);
            }
        }
        for (var i = 0; i < 5; i++) {
            // 上記を5回繰り返す
            document.write(rnzk() + ":");
        }
    </script>
</body>

試したこと

「undefined」が出る理由を調べ、「return」を試してみたのですがうまくいきませんでした。代入はどこになにを入れればいいのかがわからず、試せていません。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • y_waiwai

    2021/07/22 13:45

    このままではコードが読めないので、質問を編集し、<code>ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

    キャンセル

  • BeatStar

    2021/07/22 14:16

    そもそも基礎自体ができていないし、
    デバッグすらしていない。

    キャンセル

回答 3

checkベストアンサー

+2

質問者さんには実力的にまだ理解できないと思われますが、この記事を見ている他の人の為に解説します。

原因

undefined が出力されているのは、関数 rnzk の「戻り値」がwriteされているから。

javascriptの関数は必ず戻り値があります。
returnを明示的に記載しない場合 undefinedが戻り値として返ります。
return undefined;が省略されているというか、勝手に付け加えられると考えてもらえると良いかと思います。

例えばこんなコードを実行してみてください。

function foo(){
  console.log("foo");
}

console.log(foo());


関数fooが実行されると、関数内でconsole.logが実行され、コンソールにはfooは出力されます。
console.log("foo")の結果です。
その次の行に、undefinedが出力されます。このundefinedは関数fooの戻り値です。
console.log(foo())の結果です。

質問のコードも、console.logdocument.writeに変わっただけで、同じ現象が起こっています。

対処

要するにrnzk関数の結果そのものをwriteしなければいいので、document.writeからrnzkと":"を出力する処理を分離させればよいです。

        for (var i = 0; i < 5; i++) {
            // 上記を5回繰り返す
            rnzk();
            document.write(":");
        }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/07/22 18:47

    ご丁寧にありがとうございます。理解できるように勉強頑張りたいと思います。

    キャンセル

+2

rnzkでdocument.writeをやっているので、下記のforでは不要だと思います

for (var i = 0; i < 5; i++) {
  // 上記を5回繰り返す
  // document.write(rnzk() + ":");
  rnzk() + ":";
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

まず、コードを読みましょう

コードを読むコツは『一行レベルで、行がなにをしているか考えながら読む』です。

例えば、コメントにするとかです。

// 配列を用意
var array = new Array(6);
        array[0] = "ポツ";
        array[1] = "ザーッ";
        array[2] = "ボタ";
        array[3] = "ポタ";
        array[4] = "ゴロ";
        array[5] = "コン";

        // rnzk関数を定義
        function rnzk() {
       // 配列rnzkを用意
            var rnzk = (array[Math.floor(Math.random() * array.length)]);
       // 変数kに1〜5の乱数を設定
            var k = Math.floor(Math.random() * 5) + 1;
            // kから5まで繰り返す
            for (var i = k; i <= 5; i++) {
                // rnzkの値を出力
                document.write(rnzk);
            }
        }
     // 5回繰り返す
        for (var i = 0; i < 5; i++) {
            // rnzk関数を呼び出して戻り値を表示
            document.write(rnzk() + ":");
        }

ですね。(質問文がアレなのであえて)

コメントにしてあるやつをシミュレーションしてみてください。

そうすると、rnzk配列の方は初期化も代入もされていません。

元のコードでは(関数内の)二番目のfor文では
『上記を5回繰り返す』と書かれています。

なんか、勘違いしていそうな匂いです。

さらに、私が素直に読んだコードでは
『kから5まで繰り返す』となっています。

これは合っていますかね?

数直線を書いて考えるとわかりますよ。

そもそもkとはなんでしょうか。

素直に読むと『1〜5の乱数』のはずです。

ということは、k=1もあり得るし、
k=5の場合もあり得る。

例えば乱数が5、つまりk=5の場合、
数直線で考えると、
『一回だけしか処理しない』です。

おそらく、本来の意図とは違うはずです。

つまり『基礎ができていないことが原因』です。

プログラミングは『書いて終わり』ではありません。

私の過去回答を参考にして下さい。
やる気があるのなら必ず読みましょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2021/07/22 18:50

    回答ありがとうございます。基礎ができるように頑張りたいと思います。

    キャンセル

  • 2021/07/22 18:58

    ベテラン回答者が見本を見せなくてどうするんですか?体裁を整えて欲しかったら修正依頼で対応するべきではないでしょうか。

    キャンセル

  • 2021/07/22 19:03

    hope_mucciさん
    ですね…気をつけます…

    キャンセル

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

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

関連した質問

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