Step.2 おみくじを実現するJavaScriptを書く
それでは、JavaScriptを記述しましょう。 それほど長いソースではありませんし、ほとんどコピー＆ペーストで利用可能です。
<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>
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>
上記のJavaScriptソース中で書き換える必要があるのは、「おみくじの結果」（mres配列）と「おみくじのコメント」（mcom配列）部分だけです。 それ以外のスクリプト本体は修正不要です。
※上記のサンプルのまま使ってみる場合は、一切修正不要です。
前ページのHTMLソースと合わせて表示させると、以下のようになります。 まだ装飾を施していないので文字がそのまま表示されるだけですが、ボタンをクリックすれば「おみくじ」として機能します。
？？
＊＊＊
「おみくじを引く」ボタンをクリックすると、クリックするたびに表示が変化することがおわかり頂けるでしょう。 これだけでも「おみくじ」として機能はします。 （たまたま連続して同じ内容が表示されることがあります。）
上記のJavaScriptソースをカスタマイズするポイントや各所の意味については、次のページで解説します。
