Qiitaにも記事を公開しています。よければ見てください！！

【JavaScript】onclickを使ってみた！

JavaScript

こんにちはkazuです。
本日はjavascriptのonclick
について解説していきます。

目次

onclickとは？

onclickとはクリックされた時に動的なイベントが処理されます。
今回はonclickをクリックしたときに関数を実行されるようにします。

記入例

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset =  "UTF-8">
    <title>イベント</title>
    <script>
      function buttonclick() {
        var msg = document.querySelector('#msg');
        msg.textContent = "ボタンをクリックしました!"
        msg.style.color = "red"
      }
    </script>
  </head>
  <body>
    <p id = "msg">ボタンをクリックしてください!</p>
    <button onclick = "buttonclick()">クリックしたら変わります。</button>
  </body>
</html>

実行結果

実行前

実行後

このようにボタンを押すとリロードなしで
表示が変わります。

onclickを使用できるのはボタンだけではない

onclickはbuttonしか使えないということはありません。

上記のコードを書き換えてpタグで実行してみます。

記入例

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset =  "UTF-8">
    <title>イベント</title>
    <style>
      .click {
        cursor: pointer;
      }
      .click:hover {
        color: blue;
      }
    </style>
    <script>
      function buttonclick() {
        var msg = document.querySelector('#msg');
        msg.textContent = "ボタンをクリックしました!"
        msg.style.color = "red"
      }
    </script>
  </head>
  <body>
    <p id = "msg">ボタンをクリックしてください!</p>
    <p class = "click" onclick = "buttonclick()">クリックしたら変わります。</p>
  </body>
</html>

 

実行結果

実行前

実行後

このようにボタンと同じように実行されました。

実際に試してみる!

ボタンをクリックしてください!


ボタンをクリックしてください！

クリックしたら変わります。

最後に

いかがでしたでしょうか？
onclickの使用方法をわかりましたでしょうか？
色々試してみてください。
最後までご覧いただきありがとうございました。