Edited at

JavaScriptのDOM操作で行うアラート表示をまとめてみた


hrefでJavaScriptを動かしてアラートを出す方法

1.htmlで下記のコードを記述


index.html

    <a href="Javascript:window.alert('OK')">アラート</a>


2.ブラウザで「アラート」をクリックすると、下記のようにアラート表示されます。

スクリーンショット 2019-05-24 13.58.36.png


DOM操作でfunctionを動かしてアラートを表示させる方法

1.任意のidを指定する


index.html

  <button id="alertbtn">ボタン1</button>


2.jsファイルでfunctionのコードを記述


app.js

window.onload = function(){

document.getElementById('alertbtn').onclick = function(){
window.alert('ボタン1が押されました');
}
}

window.onload

↑ページがロードされたら function(){} の中の処理を実行します。

getElementById()

↑idプロパティが指定された文字列にアクセスします。この場合は、 index.htmlに記述されたidの値である"alertbtn" にアクセスしています。

.onclick

↑index.htmlの「ボタン1」がクリックされたときの動作を定義します。

「ボタン1」押すと、結果は下図のようになります。

スクリーンショット 2019-05-24 14.25.43.png


イベントハンドラを使用したアラート表示

上記の操作を踏まえた上でイベントハンドラを用いて記述すると、

簡潔なコードになります。

1.htmlファイルでDOMイベントを記述


index.html

  <button onclick="btn_click()">ボタン2</button>


2.jsファイルでアラートメッセージを記述


app.js

function btn_click(){

window.alert('ボタン2がクリックされました');
}

結果

スクリーンショット 2019-05-24 14.28.56.png


参考サイト

イベントハンドラ解説

https://wa3.i-3-i.info/word11493.html

DOMイベント一覧

https://so-zou.jp/web-app/tech/programming/javascript/event/handler/