JavaScript

javascriptのDOM操作で2つ目のボタンが反応されない時に確認すること

2019年11月30日

いやいやこんなタイトルでアクセスこないやろとか思いながら、でも僕がもし同じ状況ならこのワードでぐぐるかなぁとか思いながら書いてます。

おそらくgoogleという大海を渡ってこのページにたどり着いた方は

「javascriptのDOM操作でボタンを動的に作ったけど2つ目が反応しない方」

ですね?

もしそうだったら覗いて行ってください。

違った方は、、、任せます!!

javascriptで動的にボタンを作ったけどDOM操作できません

上記の問題を抱えている方に質問です。

ボタンをjavascriptで動的に作成した時に「id」はつけましたか?

もしかしたらつけずにただ変数だけ変えて新しいボタンが作れた気になってませんか?

DOMで2つ目のボタンを動かせない時のコード例

 

//1つ目のボタン

const triggerbutton = document.createElement("button");

document.body.appendChild(triggerbutton);

triggerbutton.addEventListener("click",function(){});

//2つ目のボタン

const newbutton = document.createElement("button");

container.appendChild(newbutton);

newbutton.addEventListener("click",function(){});

 

あなた
これでいいんじゃないの、、?
ダメなんです
てんし君

 

動的なボタンの作られ方

上記のコードだと実際に作られたHTMLの画面のbuttonは2つありますが違いがわかりません。

イメージだと以下のような感じ

<HTML>

    <body>

        <button></button>

             <div id="container">

                  <button></button>

             </div>

    <body>

 

constはあくまで箱でしかないので名前が違っても中身は同じです。

よってボタンに対する処理を付け加えても、2個目のボタンに加えた処理(今回のコードだとクリックした時に何らかのイベントが走るようにする処理)は動きません。

idをつけてあげてボタンごとの識別ができるようにしてあげよう

2つ目のボタンにID属性をつけて別ボタンとして認識されるようにしたコードが以下のようなものです。

この場合2つめのボタンも反応するはずです。

 

//1つ目のボタン

const triggerbutton = document.createElement("button");

document.body.appendChild(triggerbutton);

triggerbutton.addEventListener("click",function(){});

//2つ目のボタン

const newbutton = document.createElement("button");

newbutton.id="newbutton";

container.appendChild(newbutton);

document.getElementById("newbutton").addEventListener("click",function(){});

 

上記のコードだとHTMLは以下のようになります

<HTML>

    <body>

        <button></button>

             <div id="container">

                  <button id="newbutton"></button>

             </div>

    <body>

 

ボタンはそれぞれ別だと認識されるようにしよう!(idつけたり)

なぜ変数が存在するのか

中身同じなら変数なんて概念自体いらないんじゃないの?

と思う方もいるかもしれませんが、そんな暴論を言ってはいけません。

変数が存在しているおかげで私たちはわかりやすくデータを扱うことができるのです。

変数は「目印」です。

 

まとめ

・ボタンをDOM操作するときはidに注目

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-JavaScript

© 2021 エンジニアてんし君ブログ