おみくじを1回しか引けないようにするには
おみくじを1回だけしか引けないようにするには、「おみくじを引く」ボタンをクリックした後に、そのボタンを無効にするようにJavaScriptを書き加えます。
ボタンを作るinput要素には、onclick属性を使って「おみくじ」を実行するスクリプトを記述していました。 その直後に、上記のように「disabled = true;」という記述を加えます。 これによって、1度クリックするとボタンが無効になり（ページを再読込しない限り）クリックできなくなります。
詳しくは、記事「1回クリックすると無効になるボタンを作る」をご参照下さい。
実際に表示すると、以下のようになります。ボタンは1度しかクリックできません。
？？
＊＊＊
おみくじを複数個掲載する場合は
今回ご紹介した「おみくじ」は、同一ページ内にいくつでも同時に掲載できます。 その場合、JavaScriptソースとスタイルシートソースは、（いくつ掲載する場合でも）1回だけ記述すれば十分です。
動的に変化させるためにHTMLで記述したid属性（ID名）の値だけ、「おみくじ」ごとに異なる値にして下さい。例えば、以下のソースのようにです。 （ID名は、HTMLソース中に2回ずつ記述する必要があります。コピー＆ペーストして作る場合は、修正を忘れないようご注意下さい。）
<div class="omikujibase">
<p id="KujiRes1" class="kRes">？？</p>
<p id="KujiCom1" class="kCom">＊＊＊</p>
</div>
<p class="button"><input type="button" value="おみくじを引く" onclick="ShowKuji( 'KujiRes1', 'KujiCom1' );"></p>
■2つめの「おみくじ」：
<div class="omikujibase">
<p id="KujiRes2" class="kRes">？？</p>
<p id="KujiCom2" class="kCom">＊＊＊</p>
</div>
<p class="button"><input type="button" value="おみくじを引く" onclick="ShowKuji( 'KujiRes2', 'KujiCom2' );"></p>
上記では、1つめの「おみくじ」では「KujiRes1」と「KujiCom1」をID名にし、 2つめでは「KujiRes2」と「KujiCom2」をID名にしています。このように番号を加えるだけでも構いませんし、「Orange」と「Apple」のようにまったく異なる名称にしても構いません。
※ただし、「おみくじ」に限らず、同一ページ内にある他のid属性の値と重複してはいけません。
それでは最後に、今回の記事でご紹介してきたソース（HTML・JavaScript・スタイルシート）すべてをまとめて掲載しておきます。 コピー＆ペーストして使ってみる際にご活用下さい。
