• Home
  • Web制作
  • 【JavaScript入門】onclickの使い方を簡単解説！初心者も納得の基礎知識

【JavaScript入門】onclickの使い方を簡単解説！初心者も納得の基礎知識

schedule

JavaScriptのonclickとは？：Webページに動きを与える魔法！

Webページを閲覧していて、「ボタンをクリックしたら画像が切り替わった！」、「入力フォームに誤りがあるとエラーメッセージが表示された！」なんて経験はありませんか？こうしたWebページの動的な表現を支えているのが、JavaScriptというプログラミング言語です。

JavaScriptを使うことで、ユーザーのアクションに合わせたインタラクティブな表現をWebページに実装することができます。

そして、数あるJavaScriptの機能の中でも、 onclickは「要素がクリックされたら特定の処理を実行する」という動作を定義する、まさにWebページに動きを与えるための魔法の呪文なのです！

onclickの基本的な使い方：クリックしたら何かを起こそう！

onclickは、HTML要素の属性として記述します。基本的な構文は以下の通りです。

<要素 onclick="実行したい処理"> </要素>

例えば、ボタンをクリックしたら「こんにちは！」と表示する処理は、以下のように記述します。

<!DOCTYPE html>
<html>
<head>
  <title>onclickのサンプル</title>
</head>
<body>
  <button onclick="alert('こんにちは！')">クリック！</button>
</body>
</html>

このHTMLファイルをブラウザで開いてボタンをクリックすると、アラートボックスが表示され、「こんにちは！」というメッセージが表示されます。

onclickでできること：可能性は無限大！

onclickでは、単にメッセージを表示するだけでなく、様々な処理を実行できます。ここでは、具体的な例を３つご紹介しましょう。

  1. 要素のスタイルを変更する

    ボタンをクリックしたら、要素の文字色を変更する例を見てみましょう。

    <!DOCTYPE html>
<html>
<head>
  <title>onclickのサンプル</title>
</head>
<body>
  <p id="target-text">文字色が変わります</p>
  <button onclick="document.getElementById('target-text').style.color = 'red'">クリック！</button>
</body>
</html>

    文字色が変わります

    このコードでは、ボタンをクリックすると、target-textというIDを持つ段落要素の文字色が赤色に変わります。

  2. 関数を呼び出す

    onclickで関数を呼び出すことも可能です。関数を別途定義しておくことで、複雑な処理も簡潔に記述できます。

    <!DOCTYPE html>
<html>
<head>
  <title>onclickのサンプル</title>
</head>
<body>
  <button onclick="myFunction()">クリック！</button>
  <script>
    function myFunction() {
      console.log('関数が呼び出されました');
    }
  </script>
</body>
</html>

    このコードでは、ボタンをクリックするとmyFunction()という関数が呼び出され、ブラウザのコンソールに「関数が呼び出されました」と表示されます。

  3. フォームの送信

    フォームの送信ボタンにonclickを設定することで、送信前にJavaScriptで入力値のバリデーション（検証）を行うことも可能です。

    <!DOCTYPE html>
<html>
<head>
  <title>onclickのサンプル</title>
</head>
<body>
  <form>
    <input type="text" id="name" placeholder="名前を入力してください">
    <button type="submit" onclick="return validateForm()">送信</button>
  </form>
  <script>
    function validateForm() {
      let name = document.getElementById('name').value;
      if (name === '') {
        alert('名前を入力してください');
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

    このコードでは、送信ボタンをクリックするとvalidateForm()関数が呼び出され、名前が入力されていない場合はアラートを表示し、フォームの送信をキャンセルします。

イベントリスナー：より高度なイベント処理へ

ここまでonclickの基本的な使い方を見てきましたが、より複雑なWebアプリケーション開発においては、「イベントリスナー」を活用することが一般的です。

イベントリスナーは、特定のイベントが発生した際に実行される処理を設定する仕組みです。

onclick属性で直接処理を記述する方法と比較して、イベントリスナーには以下のようなメリットがあります。

  • HTMLとJavaScriptの分離: HTMLにJavaScriptのコードを記述する必要がなくなり、コードの見通しが良くなります。
  • 複数のイベントハンドラの登録: 同じ要素に複数のイベントハンドラを設定できます。
  • 動的なイベントハンドラの追加・削除: JavaScriptを使って動的にイベントハンドラを追加したり、削除したりできます。

イベントリスナーを使ったonclickイベント処理の実装例は以下の通りです。

<!DOCTYPE html>
<html>
<head>
  <title>イベントリスナーのサンプル</title>
</head>
<body>
  <button id="myButton">クリック！</button>
  <script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('クリックされました！');
    });
  </script>
</body>
</html>

このコードでは、addEventListener()メソッドを使って、myButtonというIDを持つボタンにクリックイベントリスナーを設定しています。ボタンがクリックされると、無名関数が実行され、アラートボックスが表示されます。

まとめ：onclickでJavaScriptの世界を広げよう！

今回は、JavaScriptのonclickを使ってWebページに動きを加える方法をご紹介しました。onclickは、簡単な記述でWebページにインタラクティブな要素を追加できる、非常に便利な機能です。

まずは今回ご紹介したサンプルコードを参考に、実際に手を動かしてonclickを使ってみてください。そして、onclickの可能性をどんどん広げていきましょう！

関連記事