みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

javascriptについて教えてください。

divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い

$(function(){
$("div").click(function(){
var x = this.id;
alert(x);
});
});
の部分を

document.getElementsByTagName("div").onclick = function(){
var x = this.id;
 alert(x);
};
としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか?


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$("div").click(function(){
var x = this.id;
alert(x);
});
});
</script>
</head>
<body>
<div id="aaa" class="div_link">a</div>
<div id="bbb" class="div_link">b</div>
<div id="ccc" class="div_link">c</div>
<div id="ddd" class="div_link">d</div>
<div id="eee" class="div_link">e</div>
</body>
</html>

投稿日時 - 2018-10-31 21:09:36

QNo.9553247

すぐに回答ほしいです

質問者が選んだベストアンサー

やり方は前の方が示したとおりですが、どうしてうまく動かなかったのか説明します。
document.getElementsByTagName("div").onclick = function(){ ~略~ }
を分解して前半分を見てみます。
document.getElementsByTagName("div")
は「html要素」ではなく「html要素を値として保持する配列」です。
したがって
document.getElementsByTagName("div").onclick =
という記述は配列にonclick属性を付加する記述になりますが、当然のことながら無意味な記述(エラーになるかどうかは処理系次第)です。
配列の中身である各要素にそれぞれonclick属性を付加しなくては動きません。

投稿日時 - 2018-11-01 11:45:36

お礼

詳しい解説ありがとうございました。とても勉強になりました。

投稿日時 - 2018-11-01 19:52:02

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
</head>
<body>
<div id="aaa" class="div_link">a</div>
<div id="bbb" class="div_link">b</div>
<div id="ccc" class="div_link">c</div>
<div id="ddd" class="div_link">d</div>
<div id="eee" class="div_link">e</div>
<script>
function clickTag (){
var x = this.id;
alert(x);
}
var divtags = document.getElementsByTagName("div");
for(var i=0; i<divtags.length; i++) {
divtags[i].addEventListener("click", clickTag);
}
</script>
</body>
</html>

投稿日時 - 2018-11-01 06:58:20

お礼

ありがとうございました。コードを書いていただき、参考になりました。

投稿日時 - 2018-11-01 19:53:38

あなたにオススメの質問