クリックしたら処理をするonclickの基本の使い方

JavaScriptの onclick は、クリックした時に何か処理を行う時に使うイベントハンドラです。ユーザーがクリックした時に、起こってほしいことを設定するときに使います。そんな onclick の基本の使い方メモです。

Toggle

onclickの基本の使い方

onclick を使用する際の基本コードはこのような形です。

クリックするもの.onclick = クリックしたら発生させること

クリックとはどのタイミングのことかもしっかりおさえておきましょう。クリックは「押して離す」という一連の動作です。押しただけではクリックイベントにはなりません。

押した時・離した時で別々の処理をさせたい、また別の処理を追加したいといった場合は、別のイベントハンドラを使用したり addEventListener を使用する必要があります。

今回は onclick についてのご紹介ですが、他にもさまざまなイベントハンドラがあります。色々なイベントハンドラを知っておくと最適なタイミングで処理ができます。役に立つはずです。

【参考】

【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニアブログ

【js】onclickとaddEventListenerの違い – Qiita

JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM｜PHP & JavaScript Room

要素を指定して処理を発動

クリック対象の要素を指定してイベントを発生させるサンプルコードです。このコードでは「クリック」の文字をクリックしたら「クリックの後にOKという文字が追加」されます。

HTML<p id="changeText">クリック</p> <script> const clickChangeText = document.getElementById("changeText"); function clickEvent() { clickChangeText.textContent = "クリックOK"; }; clickChangeText.onclick = clickEvent; </script><p id="changeText">クリック</p> <script> const clickChangeText = document.getElementById("changeText"); function clickEvent() { clickChangeText.textContent = "クリックOK"; }; clickChangeText.onclick = clickEvent; </script>

クリック対象のhtmlタグに id を付け、getElementById を使って要素を取得し変数に格納。clickEvent という関数を作って「クリックしたらすること」を記述しています。

動作チェック（サンプルページ）

入力内容を表示する

フォームに入力した内容を指定した場所に表示させることもできます。

HTML<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>入力してください</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>

動作チェック（サンプルページ）

数字を足す

ボタンをクリックすると数字が足されるようにすることもできます。

HTML<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><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="関数名()" とすることで、クリックした時に指定した関数が実行されます。

HTML<input type="button" id="btn01" value="テストボタン01"> <script> function btnTest(){ console.log("clickOK"); } </script><input type="button" id="btn01" value="テストボタン01"> <script> function btnTest(){ console.log("clickOK"); } </script>

onclickに処理を複数指定する

HTMLタグのonclick属性には複数の処理を指定することもできます。複数指定の場合は、セミコロン（;）で区切ります（最後は省略してもOK）書いた順に実行されるので、処理がうまくいかない場合は順序による影響がないか見直してみてください。

HTML<button>クリックでアラートを表示</button> <script> function btnTest01() { alert('1回目のアラート'); } function btnTest02() { alert('2回目のアラート'); } </script><button>クリックでアラートを表示</button> <script> function btnTest01() { alert('1回目のアラート'); } function btnTest02() { alert('2回目のアラート'); } </script>

JavaScriptで以下のように、複数の関数を実行させようとしてもうまくいきません。（以下であればaaafunc しか実行されません）

JavaScriptconst aaa = document.getElementById("aaa"); function aaafunc() { alert('1d'); } function bbbfunc() { alert('2d'); } aaa.onclick = aaafunc;bbbfunc;const aaa = document.getElementById("aaa"); function aaafunc() { alert('1d'); } function bbbfunc() { alert('2d'); } aaa.onclick = aaafunc;bbbfunc;

この場合、無名関数や addEventListener を使用することで解決できます。

JavaScriptaaa.onclick = function(){ aaafunc(); bbbfunc(); } // または aaa.addEventListener('click', aaafunc); aaa.addEventListener('click', bbbfunc);aaa.onclick = function(){ aaafunc(); bbbfunc(); } // または aaa.addEventListener('click', aaafunc); aaa.addEventListener('click', bbbfunc);

関数に引数を指定する

イベントが発生してイベントハンドラが呼び出されると、発生したイベントに関する情報が含まれる「Eventオブジェクト」が引数に渡されます。

引数に【this】でクリックされた要素を渡す HTML<input type="button" value="ボタン名"> <script> function outputThis(name) { alert(name.value); } </script><input type="button" value="ボタン名"> <script> function outputThis(name) { alert(name.value); } </script>

this はクリックする要素を取得します。上記のコードでは input要素のvalue属性値を取得。this を使うことで、クリック要素を動的に変更することができます。

動作チェック（サンプルページ）

送信時に処理する onsubmit の使い方

カテゴリー : JavaScript

📎📎📎📎📎📎📎📎📎📎

BOT