配列から要素をランダムに取り出してユーザーに返す(html, javascript)

 

前回の投稿でユーザーインプットに対して文字列を返すところまで書いたので……

内部リンク: htmlとjavascriptでユーザーインプットに対して文字列を返す

後はこの文字列を配列からランダムに取り出すようにしたい。

配列からランダムに取り出すってところは割と有名なやつがあるので難しくない(下のL15のところ)。

Math.Random()で0から1の間のランダムポイントを作り出して、配列の長さをかけることでその長さにスケールをあわせる。んでMath.floor()を使って整数化して取り出したい配列の要素指定に変える……ということだろうな。

配列からランダム取り出し

問題は、これだと一旦文字列取り出したところで固定されちゃうところなんだよな……繰り返しクリックしても、取り出されるのが同じ値になってしまう。

って、ああ……単純にファンクションの中でMath.random()に走ってもらえばいいだけか。

これにちょっと悩まなきゃいけないプログラム系の素養のなさが悲しい。

修正したのが以下のコード。まあ、もうちょいスマートな書き方はありそうだけど、とりあえずこれでやりたかったことは走っているから良しとしよう。

ランダムで文字列を取り出し その2

というわけで……これをワードプレスのショートコードに突っ込んで、以下が実装例。

ユーザーインプット(1・2かそれ以外)によって別々の配列から文字列を返す。

……Oops、ワードプレスエラーでサイトが表示できねえ。

ああ、これだとname_arr、name_arr2、name_arr3の配列のところのシングルクオテーションがショートコードのルールか何かに蹴られるのか。

ワードプレスに使う場合は、ここをダブルクオテーションに変える必要があるってことね。

というわけでそれを修正後の実行例。

 

here is output

 

うん、問題なく動いていそうな挙動。

というわけで、無事配列からランダムで文字列を返すツールができました。ちゃんちゃん。

これで自分で欲しかったwebツールを書くだけの材料ができたので、別サイトにて1つ目のwebツールを仕上げることにしよう。

……ってあれ、投稿のシングルページだとしっかり動くけど、ブログトップページだと動かないってバグがあるな。まあ、このページがブログトップから開かれる確率はほぼ0だろうしいいか。

関連記事

1. ウェブサイト制作系お勉強のまとめ

D