More than 5 years have passed since last update.

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

Last updated at 2019-05-24Posted at 2019-05-24

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

１．htmlで下記のコードを記述

index.html

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

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

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

１．任意のidを指定する

index.html

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

２．jsファイルでfunctionのコードを記述

app.js

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

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

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

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

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

###イベントハンドラを使用したアラート表示
上記の操作を踏まえた上でイベントハンドラを用いて記述すると、
簡潔なコードになります。

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

index.html

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

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

app.js

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

結果

###参考サイト
イベントハンドラ解説
https://wa3.i-3-i.info/word11493.html