【ホームページ作成】その場で表示が変化する「おみくじ」を作る

<style type="text/css"><!--
div.omikujibase {
   /* 画像を表示 */
   background-image: url("docplate.jpg");
   background-repeat: no-repeat;
   background-position: top left;
   /* 画像のサイズに合わせる */
   width: 149px;
   height: 139px;
   /* 行間を詰める */
   line-height: 1.2;
}
div.omikujibase p.kRes {
   /* くじの結果 */
   margin: 0px;
   padding: 5px 0px 0px 5px;
   font-size: 21pt;
}
div.omikujibase p.kCom {
   /* くじのコメント */
   margin: 0px;
   padding: 3px 89px 0px 3px;
   font-size: 8pt;
}
p.button {
   /* ボタンの表示 */
   width: 149px;
   margin: 5px 0px;
   text-align: center;
}
--></style>

<script type="text/javascript"><!--
mres = new Array();
mcom = new Array();
// おみくじの結果とコメント集
mres[0] = '大吉'; mcom[0] = '今日はラッキーな日';
mres[1] = '中吉'; mcom[1] = 'いいことあるかも？';
mres[2] = '小吉'; mcom[2] = 'そこそこ良い日かも';
mres[3] = ' 吉 '; mcom[3] = '頑張れば報われる？';
mres[4] = '末吉'; mcom[4] = 'まあまあでしょう。';
// 関数
function ShowKuji(kRes,kCom) {
   // くじを選ぶ
   var kuji = Math.floor(Math.random()*mres.length);
   // くじを表示
   document.getElementById(kRes).innerHTML = mres[kuji];
   document.getElementById(kCom).innerHTML = mcom[kuji];
}
// --></script>

<div class="omikujibase">
   <p id="KujiRes" class="kRes">？？</p>
   <p id="KujiCom" class="kCom">＊＊＊</p>
</div>
<p class="button"><input type="button" value="おみくじを引く" onclick="ShowKuji( 'KujiRes', 'KujiCom' );"></p>