javascript についてご教示くださいませ。

質問

javascript についてご教示くださいませ。
初心者でございます。
あるサイトでjavascript の見本がありました。
表示されているソースではボタンをおした時に 1つの文字がランダムに表示されます。
これを3✕5(下記のように表示させたい)
A B B
C D A
A A A
C B A
D D C

乱数で表示させるにはどのように変更したら良いでしょうか？
自分で色々勉強しろというご意見もあると思いますが何卒宜しくお願いいたします。

<form><input type="button" value="クリック" onClick="omikuji()"></form>

<script type="text/javascript">
function omikuji() {
rand = Math.floor(Math.random()*5);
if (rand == 0) msg = "A";
if (rand == 1) msg = "B";
if (rand == 2) msg = "C";
if (rand == 3) msg = "D";
if (rand == 4) msg = "E";
alert(msg);
}
</script>

回答No.2

Ogre7077 · ベストアンサー

予め表示する枠を HTML で用意しておき、スクリプトで中身だけを書き換える方法です

<!-- omikuji を表示する枠3x5個 -->
<table id=omikujiwaku><tbody>
<tr><td>A<td>A<td>A
<tr><td>A<td>A<td>A
<tr><td>A<td>A<td>A
<tr><td>A<td>A<td>A
</tbody></table>

// omikuji() の最後を、戻り値を返すように修正
alert(msg);
→ return msg;

<!-- onClick を別の処理に-->
onclick="omikuji()"
→ onclick="枠埋める()"

// 枠毎に omikuji() を実行する
function 枠埋める() {
var 全ての枠 = document.getElementById('omikujiwaku').querySelectorAll('td');
var 枠毎の処理 = function(td){ td.textContent = omikuji() };
Array.prototype.slice.apply(全ての枠).forEach(枠毎の処理);
}

お礼

すごいです。html で表示できるのですね。有難うございます。おかげて良いものができました。m(_ _)m

回答No.3

babu_baboo

rand = Math.floor(Math.random()*5);
var rand = Math.floor(Math.random()*5);
--
var 全ての枠 = document.getElementById('omikujiwaku').querySelectorAll('td');
var 全ての枠 = document.querySelectorAll('#omikujiwaku td');
--
Array.prototype.slice.apply(全ての枠).forEach(枠毎の処理);
Array.prototype.forEach.call (全ての枠, 枠毎の処理);

--
<form><input type="button" value="クリック" onclick="hoge()"></form>
--
<script>

var omikuji = (function (list) {
　var len = list.length;
　var rnd = Math.random;

　return function () {
　　return list[rnd () * len | 0];
};
})('ABCDE');

function hoge () {
　var b = document.querySelectorAll('#omikujiwaku td');
　var c = function (td) { td.textContent = this () };
　Array.prototype.forEach.call (b, c, omikuji);
}
</script>

お礼

ご丁寧にご指導いただき有難うございます。m(_ _)m助かりました。

回答No.1

yambejp

同じ回数ずつ縦×横するなら二重でforを回すのが妥当です。
ご提示のソースを流用するならこんな感じ

<form><input type="button" value="クリック" onClick="omikujiA()"></form>
<div id="hoge"></div>
<script>
function omikujiA() {
var str="";
for(var i=0;i<5;i++){
for(var j=0;j<3;j++){
if(j>0) str+=" ";
str+=omikuji();
}
str+="<br>\n";
}
document.getElementById("hoge").innerHTML=str;
}
function omikuji() {
rand = Math.floor(Math.random()*5);
if (rand == 0) msg = "A";
if (rand == 1) msg = "B";
if (rand == 2) msg = "C";
if (rand == 3) msg = "D";
if (rand == 4) msg = "E";
return msg;
}
</script>

お礼

お答え頂き有難うございます。
色んなやり方があるのですね。
勉強になります。m(_ _)m