クリックイベント

2023-08-112024-10-22

↓↓↓ スライドできます ↓↓↓

[metaslider id=”2094″]

<!DOCTYPE html>: HTML5のドキュメントタイプ宣言を指定します。
<html>: HTML文書のルート要素です。
<head>: ドキュメントのメタ情報やリンク、スタイルシートなどが含まれるセクションです。
<title>: ブラウザのタブやウィンドウのタイトルバーに表示されるタイトルを指定します。
<body>: ドキュメントの本体部分で、表示されるコンテンツが含まれます。
<button id="myButton">クリックしてください</button>: ページに表示されるボタン要素を定義します。id 属性を使って、ボタンに “myButton” という識別子を付けます。
<script src="script.js"></script>: 外部のJavaScriptファイルを読み込むための <script> タグです。src 属性で “script.js” ファイルを指定しています。これにより、JavaScriptのコードが別のファイルに分離されています。

var button = document.getElementById("myButton");: document オブジェクトの getElementById メソッドを使用して、id が “myButton” の要素を取得します。この変数 button は後でイベントリスナーを追加するために使用されます。
function handleClick() { ... }: クリックイベントが発生した際に呼び出される関数 handleClick を定義しています。この関数は単純なアラートダイアログを表示します。
button.addEventListener("click", handleClick);: addEventListener メソッドを使用して、ボタン要素に “click” イベントリスナーを追加します。クリックイベントが発生したときに、先ほど定義した handleClick 関数が呼び出されるようになります。

CopyCode

            
    <!DOCTYPE html>

    <html>

    <head>

        <title>イベントハンドリングの例</title>

    </head>

    <body>
    
        <button id="myButton">クリック</button>
        
        <script src="script.js"></script>
        
        </body>

    </html>


　（今回は空ファイルです。）


    var button = document.getElementById("myButton");

    function handleClick() {

        alert("ボタンがクリックされました！");

    }

    button.addEventListener("click", handleClick);

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

クリックイベント

関連記事