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

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

【実行画面】

【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 で呼ばれます。
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) で関数を呼び出します。
最初に表示されている10個の画像は、ここから呼ばれた MouseClick() 関数の実行結果です。
石をクリックすると onClick で設定された箇所から MouseClick(",i,") が呼び出されます。
<script type="text/javascript">
  MouseClick(10);
</script>

【NOTE】

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)">

3個残したときに展開されたページの全ソースコードです。
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)