おみくじを1回しか引けないようにするには

おみくじを1回だけしか引けないようにするには、「おみくじを引く」ボタンをクリックした後に、そのボタンを無効にするようにJavaScriptを書き加えます。

<input type="button" value="おみくじを引く" onclick="ShowKuji( 'KujiRes', 'KujiCom' ); disabled = true;">

ボタンを作るinput要素には、onclick属性を使って「おみくじ」を実行するスクリプトを記述していました。 その直後に、上記のように「disabled = true;」という記述を加えます。 これによって、1度クリックするとボタンが無効になり(ページを再読込しない限り)クリックできなくなります。

詳しくは、記事「1回クリックすると無効になるボタンを作る」をご参照下さい。

実際に表示すると、以下のようになります。ボタンは1度しかクリックできません。

??

***

おみくじを複数個掲載する場合は

今回ご紹介した「おみくじ」は、同一ページ内にいくつでも同時に掲載できます。 その場合、JavaScriptソースとスタイルシートソースは、(いくつ掲載する場合でも)1回だけ記述すれば十分です。

動的に変化させるためにHTMLで記述したid属性(ID名)の値だけ、「おみくじ」ごとに異なる値にして下さい。例えば、以下のソースのようにです。 (ID名は、HTMLソース中に2回ずつ記述する必要があります。コピー&ペーストして作る場合は、修正を忘れないようご注意下さい。)

■1つめの「おみくじ」:
<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・スタイルシート)すべてをまとめて掲載しておきます。 コピー&ペーストして使ってみる際にご活用下さい。

すべてのソースのまとめへ >>