ボタンをクリックすると、関数を呼び出す

投稿日: 2013年2月18日作成者: alphasis

ボタンクリックで、JavaScriptの関数を呼び出すサンプル。

構文

<button onclick="関数名()">ボタン名</button>

実装例

1

ソースコード

JavaScript

<script type="text/javascript">
function funcAdd1() {
document.getElementById( "sample" ).innerHTML =
parseInt( document.getElementById( "sample" ).firstChild.nodeValue ) + 1;
}
function funcAdd2() {
document.getElementById( "sample" ).innerHTML =
parseInt( document.getElementById( "sample" ).firstChild.nodeValue ) + 2;
}
</script>

HTML

<div id="sample">1</div>
<div id="sampleButton">
<button onclick="funcAdd1()">１を足す</button>
<button onclick="funcAdd2()">２を足す</button>
</div>

CSS

<style type="text/css">
#sample {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: red;
color: white;
text-align: center;
border-radius: 10px;
}
#sampleButton {
width: 360px;
margin-top: 5px;
text-align: center;
}
#sampleButton button {
font-size: 16px;
}
</style>

カテゴリー: JavaScript, イベントパーマリンク