質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

5回答

2652閲覧

javascriptでdivのボタンを作りたい。

dd6

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/10/31 12:19

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">a</div> <div id="bbb">b</div> <div id="ccc">c</div> <div id="ddd">d</div> <div id="eee">e</div> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

getElementsByTagNameで取得できるものはHTMLCollectionなので、
1つ1つ個別に処理してあげる必要があります。

JavaScript

1Array.from(document.getElementsByTagName("div")).forEach(elm => { 2 elm.addEventListener("click", evt => { 3 var x = evt.target.id; 4 alert(x); 5 }); 6});

投稿2018/10/31 12:33

root_jp

総合スコア4666

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dd6

2018/11/01 10:45

返ってくるものにそれぞれに処理する必要があるんですね。参考になりました。ありがとうございました。
guest

0

document.getElementsByTagNameはエレメントを返しません。

与えられたタグ名を持つ要素の HTMLCollection を返します。

document.getElementsByTagName - Web API インターフェイス | MDN

↓こちらを見ると分かるとおり、HTMLCollection には onclick というプロパティがないので、そのコードは動きません。
HTMLCollection - Web API インターフェイス | MDN

HTMLCollection は配列のように添え字を使って扱えますので、ループを組むなどによって処理をすることができます。
また、配列に変換することもできます。

Element.getElementsByTagName()で取得したHTMLCollectionは配列ではないので、例えば、配列のプロトタイプ関数であるforEach()を利用することはできません。

しかし、Array.from()で配列に変換すれば利用できます。
Array.from() - 配列に似たオブジェクトから配列を作る | JavaScriptリファレンス

投稿2018/10/31 12:40

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dd6

2018/11/01 10:44

返ってくるのはエレメントではないんですね。参考になりました。ありがとうございました。
guest

0

ベストアンサー

まず、ご自身で「イベントリスナー」という概念を調べてみてください。

JQueryなしで書いてみた例を上げますが、具体的には解説しませんので自分で読み解いてください。

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>無題ドキュメント</title> 6 </head> 7 <body> 8 <div id="aaa">a</div> 9 <div id="bbb">b</div> 10 <div id="ccc">c</div> 11 <div id="ddd">d</div> 12 <div id="eee">e</div> 13 <script type="text/javascript" language="javascript"> 14 var tags = document.getElementsByTagName("div"); 15 for (var i = 0; i < tags.length; i++) { 16 tags[i].addEventListener("click", function(){ 17 var x = this.id; 18 alert(x); 19 }); 20 } 21 </script> 22 </body> 23</html>

投稿2018/10/31 12:32

mather

総合スコア6753

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dd6

2018/11/01 10:47

イベントリスナーについて調べてみます。参考になりました。ありがとうございました。
guest

0

匿名でない関数にしとくパターン

javascript

1<!doctype html> 2<html> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>無題ドキュメント</title> 7</head> 8 9<body> 10 <div id="aaa">a</div> 11 <div id="bbb">b</div> 12 <div id="ccc">c</div> 13 <div id="ddd">d</div> 14 <div id="eee">e</div> 15 16 <script type="text/javascript" language="javascript"> 17 (function () { 18 function onClick(event) { 19 alert(event.target.id); 20 } 21 function initialize() { 22 var elems = Array.from(document.querySelectorAll('div')); 23 elems.forEach(o => o.addEventListener('click', onClick)); 24 } 25 26 initialize(); 27 }()); 28 </script> 29</body> 30 31</html>

投稿2018/10/31 12:42

編集2018/10/31 13:04
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dd6

2018/11/01 10:42

回答ありがとうございます。参考になりました。
guest

0

せっかくなのでいくつか紹介しておきます。

HTML

1<div id="aaa">a</div> 2<div id="bbb">b</div> 3<div id="ccc">c</div> 4<div id="ddd">d</div> 5<div id="eee">e</div>

documentにaddEventする

javascript

1document.addEventListener('click',function(e){ 2 var t=e.target; 3 if([].map.call(document.querySelectorAll('div[id]'),x=>x).indexOf(t)>=0){ 4 alert(t.getAttribute('id')); 5 } 6});

メリット:windowのロード時に処理しなくていいので動的要素にも対応できる

NodeListやHTMLCollectionを拡張

javascript

1[NodeList,HTMLCollection].forEach(function(x){ 2 x.prototype.addEventListener=function(eventStr,callback){ 3 [].forEach.call(this,function(x){ 4 x.addEventListener(eventStr,callback); 5 }); 6 }; 7}); 8 9window.addEventListener('DOMContentLoaded', function(e){ 10 document.querySelectorAll('div[id]').addEventListener('click',function(e){ 11 alert(e.target.getAttribute('id')); 12 }); 13});

メリット:任意のタイミングで複数のタグにaddEventできるのでライブラリ的に使える
(たぶん質問の処理はこれに近い)

windowのロード時に任意にaddEventする

javascript

1window.addEventListener('DOMContentLoaded', function(e){ 2 [].forEach.call(document.querySelectorAll('div[id]'),function(x){ 3 x.addEventListener('click',function(e){ 4 alert(x.getAttribute('id')); 5 }); 6 }); 7});

メリット:単純な構造でわかりやすい

投稿2018/11/01 00:54

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dd6

2018/11/01 10:41

いろいろ教えていただきありがとうございます。とても参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問