javascript: onClickについて

Question

[codepen]動くサンプル

実現したい事

div要素にonclickを設定し、対象のdivがクリックされた時に、要素内のテキストを取得し、input textに反映させたい。

困っている事

サーバーから返ってくるデータの数によってdivの要素数が異なるため、事前にidやonclickを設定できずにいる。
文章で説明するのがあまり得意じゃないため、リンク先のcodepenを見て頂きたいのですが、hoge2やhoge3をクリックするとhoge1の要素を取得し、処理が実行されてしまうのを意図した動きにしたい。

<div class="div-btn" id="btn1" onclick="func_1()">
  <div class="input" id="input1">hoge1</div>
</div>
<div class="div-btn" id="btn2" onclick="func_1()">
  <div class="input" id="input2">hoge2</div>
</div>
<div class="div-btn" id="btn3" onclick="func_1()">
  <div class="input" id="input3">hoge3</div>
</div>

<p>ココにクリックしたdivのinputのバリューが反映される</p>
<input type="text" class="input" id="res">

function func_1(){
  //ココで取得しているgetElementByIdが動的に変わってくれれば解決するはず。
  let el = document.getElementById( "btn1" );
  el.style.background="red";
  //ココで取得しているgetElementByIdが動的に変わってくれれば解決するはず。
  let input = document.getElementById("input1").textContent;
  document.getElementById("res").value = input;
}

#追記
kei344さんとhatena19さんからご教示いただいコードを参考に以下のように修正する事で解決しました。
ご教示頂きありがとうございました。

.active {
  background-color: red;
}

function func_1(button){
  var elements = document.getElementsByClassName("div-btn");
  for(i=0;i<elements.length;i++){
    elements[i].classList.remove("active");
  }
  button.classList.add("active");
  let input = button.firstElementChild.textContent;
  document.getElementById("res").value = input;
}
}

Comments

[退会済みユーザー]

jQuery は使わない条件ですか？

[nanase21]

はい。出来ればjavascript(ES6)で書きたいです。
でも、jqueryの方が簡単であればjqueryも検討したいと考えています。

[退会済みユーザー]

jQuery を使った方が簡単に (少ない行数で) 書けるのは間違いないです。jQuery を使わないことにこだわる理由はないのでは？

[nanase21]

これといった理由は無いのですが勉強の一環で、プログラミングを勉強しているため極力ES6で書けたらいいなと思っています。(理由が浅くてすいません...）

Answer 1

プログラミングを勉強しているため極力ES6で書けたらいいなと思っています。

Vanilla JS で、現状のコードを活かすなら、

<div class="div-btn" id="btn1" onclick="func_1(this)">
  <div class="input" id="input1">hoge1</div>
</div>
<div class="div-btn" id="btn2" onclick="func_1(this)">
  <div class="input" id="input2">hoge2</div>
</div>
<div class="div-btn" id="btn3" onclick="func_1(this)">
  <div class="input" id="input3">hoge3</div>
</div>

<p>ココにクリックしたdivのinputのバリューが反映される</p>
<input type="text" class="input" id="res">

function func_1(button){
  button.style.background="red";
  let input = button.firstElementChild.textContent;
  document.getElementById("res").value = input;
}

onclick の function の引数にthisを渡すことで、クリックした要素を取得できます。

---

コメントでの要望の、クリックした以外の要素の背景色を戻す処理を追加しました。

function func_1(button){
  var elements = document.getElementsByClassName("div-btn");
  for(i=0;i<elements.length;i++){
    elements[i].style.backgroundColor = "lightgray";
  }
  button.style.background="red";
  let input = button.firstElementChild.textContent;
  document.getElementById("res").value = input;
}

getElementsByClassName は複数の要素を返しますので(Elementsと複数形になっていることに注目してください)、forループですべての div-btn の背景色を戻しています。

Comments

[nanase21]

ご教示いただきありがとうございます。
ほとんど私の意図した処理になりました。
一点だけ、追加でご教示いただきたい事があります。
現状ですと、一度クリックするとずっとバックグランドカラーが赤になったままですが、これを トグルみたいな形で他のdivをクリックしたときは、それ以外のdivは元のカラーに戻るみたいな処理をしたいときはどのようにすれば良いかご教示いただけないでしょうか？

[nanase21]

ありがとうございます。
意図した処理になりました。
最後にもう一つだけお聞きしたいのですが、下記のコードを書いたところ処理が実行されなかったのですが、要素を削除するremoveを使う場合は必ず対象の要素に削除したいclassが存在しないといけないのでしょうか？
もしお分かりですあれば、ご教示いただけると幸いです。
document.getElementsByClassName("div-btn").classList.remove("active");

[nanase21]

ありがとうござます。
for文を見て理解しました。

[hatena19]

回答の追記のようにforループで、要素一つずつに対して classList.remove してください。

Answer 2

簡単な jQuery で。

.active {
	background-color: red;
}

$( function() {
	var $tgt = $( '#res' );
	var $btn = $( '.div-btn' );
	$btn.on( 'click', function( e ) {
		$btn.removeClass( 'active' );
		$( this ).addClass( 'active' );
		$tgt.val( $( this ).find( '.input' ).text() );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/oht6Leza/](https://jsfiddle.net/oht6Leza/)

Comments

[kei344]

getElementsByClassNameは複数の要素が入っているからjQuery のような書き方はできません。
「getElementsByClassName」で検索してください。

[nanase21]

ご教示頂きありがとうございます。
keiさんからご教示いただいた実装を参考にさせていただきながらjsに書き換えさせて頂きました。
ありがとうございました。

Answer 3

jQuery はなるべく使いたくないとのことですので・・・

であれば、例えば、対象とする複数の div 要素全体をさらに div で囲ってその click イベントにリスナをアタッチし、バブリングで上がってくるイベントをそのリスナで捉えて処理してはいかがですか？

【追記】

キャプチャリングとバブリングのサンプルの記事を紹介しておきます。

キャプチャリングとバブリング
http://surferonwww.info/BlogEngine/post/2012/12/01/capturing-target-and-bubbling-phases.aspx

記事のサンプルコードは記事の中で「実験室」としたリンク先で実際に動かして試すことができますので、興味があればどうぞ。