JavaScriptのお勉強 - onclick イベントに関数を割当てよう
その1 a をクリックすると、メッセージを出す
html インラインで書いてみる
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javaScript</title> </head> <body> <a href="#" onclick="alert('No.0が押されました');">No.0</a><br> <a href="#" onclick="alert('No.1が押されました');">No.1</a><br> <a href="#" onclick="alert('No.2が押されました');">No.2</a><br> </body> </html>
その2 head内に書いてみる
普通に書いてみる。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javaScript</title> <script> // 実行する関数 function disp(aRel) { alert(aRel + "が押されました"); } // 要素の取得 var btns = document.getElementsByTagName('a'); // イベントに関数を割り当てる btns[0].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; btns[1].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; btns[2].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; </script> </head> <body> <a href="#" rel="No.0">No.0</a><br> <a href="#" rel="No.1">No.1</a><br> <a href="#" rel="No.2">No.2</a><br> </body> </html>
なぜ動かない?
その3 動くタイミング
DOMが形成されてから、実行されるようにする
要素の取得~イベントに関数を割り当てる部分を
window.onload = function() {・・・};
で囲んでみる
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javaScript</title> <script> // 実行する関数 function disp(aRel) { alert(aRel + "が押されました"); } // DOMが形成されてから実行する window.onload = function() { // 要素の取得 var btns = document.getElementsByTagName('a'); // イベントに関数を割り当てる btns[0].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; btns[1].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; btns[2].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; }; </script> </head> <body> <a href="#" rel="No.0">No.0</a><br> <a href="#" rel="No.1">No.1</a><br> <a href="#" rel="No.2">No.2</a><br> </body> </html>
動いた!
その4 コードを効率化
イベントの割当をループにする3つの a 要素に、それぞれイベントを割り当てる必要があるので、
3回書いていたが、 それを for文の繰り返しで記入する。
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>javaScript</title> <script> // 実行する関数 function disp(aRel) { alert(aRel + "が押されました"); } // DOMが形成されてから実行する window.onload = function() { // 要素の取得 var btns = document.getElementsByTagName('a'); // イベントに関数を割り当てる for(var i = 0; i < 3; i++) { btns[i].onclick = function(){ var aRel = this.getAttribute('rel'); disp(aRel); }; } }; </script> </head> <body> <a href="#" rel="No.0">No.0</a><br> <a href="#" rel="No.1">No.1</a><br> <a href="#" rel="No.2">No.2</a><br> </body> </html>