undefinedを非表示にしたい

前提・実現したいこと

オノマトペを連続して出し、音ごとに区切りたいのですが、実行した際に「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」を試してみたのですがうまくいきませんでした。代入はどこになにを入れればいいのかがわからず、試せていません。

y_waiwai

2021/07/22 04:45

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

BeatStar

2021/07/22 05:16

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

行動規範の内容に同意します

回答3件

ベストアンサー

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

原因

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

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

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

javascript
1function foo(){
2  console.log("foo");
3}
4
5console.log(foo());

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

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

対処

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

javascript
1        for (var i = 0; i < 5; i++) {
2            // 上記を5回繰り返す
3            rnzk();
4            document.write("：");
5        }

投稿2021/07/22 07:34

hope_mucci

総合スコア4447

yuki_yama

2021/07/22 09:47

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

行動規範の内容に同意します

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

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

投稿2021/07/22 04:48

gamugamu

総合スコア10

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

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

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

// 配列を用意
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の場合、
数直線で考えると、
『一回だけしか処理しない』です。