「Java ScriptのOnclick」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
今日はOnclickについて勉強していこうと思います。~
&color(red){ボタン(htmlのINPUTタグ)がクリックされた時にJavaScriptを実行したい}場合があります。~
INPUTタグのOnClick属性にJavaScriptを記述することで、ボタンクリック時にJavaScriptを実行する事が可能になります。~
実際にコードを書いていきます。~
*コード
<head>
<meta charset="utf-8">
<title>onclick</title>
<script language="javascript" type="text/javascript">
function OnButtonClick() {
target = document.getElementById("output");
target.innerHTML = "修行";
}
</script>
</head>
<body>
<input type="button" value="男は" onclick="OnButtonClick();"/><br />
<br />
<div id="output"></div>
</body>
</html>
*実行結果
#image(width=350,男は.png)
このボタンをクリックすると、
#image(width=350,修行.png)
*解説
上に書かれたコードを解説していきます。~
"output"のIDを持つdivを作り、そのタグの内部のテキストに"修行"の文字列を挿入します。~
INPUTのonclick属性に実行したいJavaScriptを記述します。~
今回の場合、呼び出す関数名のみを記述したため、ボタンが押されるとOnButtonClick()関数が実行される動作となります。~
そこで、functionにより関数を定義しています。~
~
以上
今日はOnclickについて勉強していこうと思います。~
&color(red){ボタン(htmlのINPUTタグ)がクリックされた時にJavaScriptを実行したい}場合があります。~
INPUTタグのOnClick属性にJavaScriptを記述することで、ボタンクリック時にJavaScriptを実行する事が可能になります。~
実際にコードを書いていきます。~
*コード
<head>
<meta charset="utf-8">
<title>onclick</title>
<script language="javascript" type="text/javascript">
function OnButtonClick() {
target = document.getElementById("output");
target.innerHTML = "修行";
}
</script>
</head>
<body>
<input type="button" value="男は" onclick="OnButtonClick();"/><br />
<br />
<div id="output"></div>
</body>
</html>
*実行結果
#image(width=350,男は.png)
このボタンをクリックすると、
#image(width=350,修行.png)
*解説
上に書かれたコードを解説していきます。~
"output"のIDを持つdivを作り、そのタグの内部のテキストに"修行"の文字列を挿入します。~
INPUTのonclick属性に実行したいJavaScriptを記述します。~
今回の場合、呼び出す関数名のみを記述したため、ボタンが押されるとOnButtonClick()関数が実行される動作となります。~
そこで、functionにより関数を定義しています。~
~
*おまけ
<input type="button" value="サブウィンドウを閉じる" onClick="window.close()">
あるいは
<a href="javascript:;" onclick="window.close();">
このように記述する事でウィンドウを閉じる事が出来ます。~
~
以上
