クリックで石を取り除く関数

石をクリックして下さい。

【実行画面】

【Source Code】

<script type="text/javascript">
  function MouseClick(num)
  { if (num<10) document.write("<h2>石を取り除きました</h2>");
    for(i=0; i<num; i++)
      document.write("<img src='img/jewel.gif'","onClick=MouseClick(",i,")>");
  }
</script>
</head>

<body>
<h1>クリックで石を取り除く関数</h1>
<h3>石をクリックして下さい。</h3>

<script type="text/javascript">
  MouseClick(10);
</script>

MouseClick(num) 関数は num 個の石を表示する関数で <head> の中で定義しています。
最初 num=10 で呼ばれます。
１０個の石の画像に onClick から MouseClick() の呼び出しを設定して、パラメータとして石の番号(i) を渡します。
クリックされたイメージの "onClick=MouseClick(", i , ")" が再起的に呼び出されます。
今回は連続して取り除くことは出来ません。
もう一度テストするときはブラウザの戻るボタンをクリックして下さい。

  function MouseClick(num)
  { if (num<10) document.write("<h2>石を取り除きました</h2>");
    for(i=0; i<num; i++)
      document.write("<img src='img/jewel.gif'","onClick=MouseClick(",i,")>");
  }

このページ(mouse_click.html)の <body> から、最初に MouseClick(10) で関数を呼び出します。
最初に表示されている１０個の画像は、ここから呼ばれた MouseClick() 関数の実行結果です。
石をクリックすると onClick で設定された箇所から MouseClick(",i,") が呼び出されます。

<script type="text/javascript">
  MouseClick(10);
</script>

【ＮＯＴＥ】

Google Chrome で起動して [Google Chrome の設定] から [名前を付けてページを保存] からHTMLを保存して確認しました。
img タグは次のように展開されていました。

<script language="JavaScript">
  MouseClick(10);
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(0)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(1)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(2)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(3)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(4)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(5)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(6)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(7)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(8)">
<img src="./マウスクリック_files/jewel.gif" onclick="MouseClick(9)">

３個残したときに展開されたページの全ソースコードです。
document.write() で書き出した HTML 文だけが格納されています。
連続して取り除くには img タグだけで無く、head や MouseClick() 関数も含めた MouseClick.htm 自身を呼び出せばうまく行きそうですね。
連続して取り除くプログラムは「石取ゲーム」を参照して下さい。

<h2>石を取り除きました</h2>
<img src='img/jewel.gif'onClick=MouseClick(0)>
<img src='img/jewel.gif'onClick=MouseClick(1)>
<img src='img/jewel.gif'onClick=MouseClick(2)>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)