JavaScriptの onclick は、クリックした時に何か処理を行う時に使うイベントハンドラです。ユーザーがクリックした時に、起こってほしいことを設定するときに使います。
そんな onclick の基本の使い方メモです。
onclickの基本の使い方
onclick を使用する際の基本コードはこのような形です。
クリックするもの.onclick = クリックしたら発生させることクリックとはどのタイミングのことかもしっかりおさえておきましょう。クリックは「押して離す」という一連の動作です。押しただけではクリックイベントにはなりません。
押した時・離した時で別々の処理をさせたい、また別の処理を追加したいといった場合は、別のイベントハンドラを使用したり addEventListener を使用する必要があります。
今回は onclick についてのご紹介ですが、他にもさまざまなイベントハンドラがあります。色々なイベントハンドラを知っておくと最適なタイミングで処理ができます。役に立つはずです。
要素を指定して処理を発動
クリック対象の要素を指定してイベントを発生させるサンプルコードです。
このコードでは「クリック」の文字をクリックしたら「クリックの後にOKという文字が追加」されます。
<p id="changeText">クリック</p>
<script>
const clickChangeText = document.getElementById("changeText");
function clickEvent() {
clickChangeText.textContent = "クリックOK";
};
clickChangeText.onclick = clickEvent;
</script>クリック対象のhtmlタグに id を付け、getElementById を使って要素を取得し変数に格納。clickEvent という関数を作って「クリックしたらすること」を記述しています。
入力内容を表示する
フォームに入力した内容を指定した場所に表示させることもできます。
<p>入力してください</p>
<input type="text" id="cont">
<button type="button" id="btn">入力OK</button>
<div id="output"></div>
<script>
const clickBtn = document.getElementById("btn");
const output = document.getElementById("output");
const content = document.getElementById("cont");
function clickEvent() {
output.innerHTML = "入力内容は「" + content.value + "」です";
}
clickBtn.onclick = clickEvent;
</script>数字を足す
ボタンをクリックすると数字が足されるようにすることもできます。
<p id="num">1</p>
<button id="addBtn">クリックすると「1」ずつ追加される</button>
<script>
const addBtn = document.getElementById("addBtn");
const num = document.getElementById("num");
function addNum() {
num.innerHTML = parseInt(num.firstChild.nodeValue) + 1;
}
addBtn.onclick = addNum;
</script>htmlタグにonclick属性を追加して処理を実行
クリックするhtmlタグに「onclick属性」を追加してイベントを発生させる方法。onclick="関数名()" とすることで、クリックした時に指定した関数が実行されます。
<input type="button" id="btn01" value="テストボタン01" onclick="btnTest()">
<script>
function btnTest(){
console.log("clickOK");
}
</script>onclickに処理を複数指定する
HTMLタグのonclick属性には複数の処理を指定することもできます。複数指定の場合は、セミコロン（;）で区切ります（最後は省略してもOK）書いた順に実行されるので、処理がうまくいかない場合は順序による影響がないか見直してみてください。
<button onclick="btnTest01();btnTest02();">クリックでアラートを表示</button>
<script>
function btnTest01() {
alert('1回目のアラート');
}
function btnTest02() {
alert('2回目のアラート');
}
</script>JavaScriptで以下のように、複数の関数を実行させようとしてもうまくいきません。（以下であればaaafunc しか実行されません）
const aaa = document.getElementById("aaa");
function aaafunc() {
alert('1d');
}
function bbbfunc() {
alert('2d');
}
aaa.onclick = aaafunc;bbbfunc;この場合、無名関数や addEventListener を使用することで解決できます。
aaa.onclick = function(){
aaafunc();
bbbfunc();
}
// または
aaa.addEventListener('click', aaafunc);
aaa.addEventListener('click', bbbfunc);関数に引数を指定する
イベントが発生してイベントハンドラが呼び出されると、発生したイベントに関する情報が含まれる「Eventオブジェクト」が引数に渡されます。
引数に【this】でクリックされた要素を渡す
<input type="button" onclick="outputThis(this)" value="ボタン名">
<script>
function outputThis(name) {
alert(name.value);
}
</script>this はクリックする要素を取得します。上記のコードでは input要素のvalue属性値を取得。this を使うことで、クリック要素を動的に変更することができます。
カテゴリー : JavaScript
