getElementById()でIDを複数指定したい

Question

要素１をクリックした時に座標１にクリックした時の座標を、要素２をクリックした時に座標２にクリックした時の座標という風にしたい。
要素はドラッグで動かせるようしていてドロップした時の座標が欲しい。
今のやり方では要素１の座標しか取り出せていないので解決方法を教えてください。

//要素１
<div class="drag-and-drop" id="target" style="top:;left:0;background-color:#f48fb1;">正方形</div>
//要素２
<div class="drag-and-drop2" id=target2" style="top:1;left:110px;background-color:#64b5f6;">縦長</div>
//要素３
<div class="drag-and-drop3" id="target3" style="top:1;left:220px;background-color:#ffe082;">横長</div>
//座標１
document.getElementById("target").addEventListener('click', function(event) {
    var kimetu = event.pageX ; // 水平の位置座標
    var yaiba = event.pageY ; // 垂直の位置座標
    document.getElementsByName('name')[0].value = kimetu + ":" + yaiba;
});
//座標２
document.getElementById( "target2" ).addEventListener('click', function(event) {
    var kuroko = event.pageX ; // 水平の位置座標
    var basuke = event.pageY ; // 垂直の位置座標
    document.getElementsByName('name2')[1].value = kuroko + ":" + basuke;
});
//座標３
document.getElementById( "target3" ).addEventListener('click', function(event) {
    var saikikusuo = event.pageX ; // 水平の位置座標
    var sainann    = event.pageY ; // 垂直の位置座標
    document.getElementsByName('name3')[2].value = saikikusuo + ":" + sainann;
});
</script>




<form method="post" action="demo.php" >
    <p>
        座標１
        <input type="text" value="クリックしてね☆" name="name">
       
    </p>
    
    
    <p>
        座標2
        <input type="text" value="クリックしてね☆" name="name2">
       
    </p>
    <p>
        座標3
        <input type="text" value="クリックしてね☆" name="name3">
       
    </p>
    <input type="submit" value="submit">
</body>
</html>

Comments

[x_x]

PHP ではないですよね？
適切なタグをつけてください

[shinji709]

JavaScriptコード中で取得している、idがtargetである要素、jumpである要素が、今現在提示されているHTMLコード中に含まれておりませんので追加してください。どこをクリックする想定のコードなのか分かりません。各input要素のvalueに"クリックしてね☆"と書かれていますが、表示のみならずクリックするのもinput要素なのですか？もしそうでも適切にidを振っていただかないと、日本語による説明も不足しているためやりたいことの意図がつかめません。

[shinji709]

targetは含まれていました。失礼しました。

Answer 1

こんなかんじです

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelectorAll('#a,#b').forEach(x=>{
    x.addEventListener('click',()=>{
      console.log(x.textContent);
    });
  });
});
</script>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div> <!--反応しない-->

Comments

[minomonnta]

回答ありがとうございます、ちょっとよく分からなかったのでもう少し詳しく教えていただいてもよろしいでしょうか

[yambejp]

なにかを指定してHTML要素を掴むにはgetElementById()よりquerySelectorもしくは
querySelectorAllが楽だということです。
特に複数を掴むのであればquerySelectorAllがマストでしょう
掴んだ後はforEachでそれぞれのHTML要素に対して処理を入れればよいです

Answer 2

HTML ではどのエレメントにも id 属性を付与することができますが、条件として
** 一つの HTML 要素ツリー内では、id属性の値は重複しない **
ことが要求されています。
※id属性が指定されていないエレメントについては無視してよい

なので、id属性を指定するということは、イコール高々一つのエレメントを指定する、ことに他なりません。
なので getElementByID と、単数形なのです。

複数のエレメントに対して同じ処理をしたいのなら、getElementByID ではなく、getElementsByClassName() とか、querySelector() を使う方がよいのです。

Comments

[AkitoshiManabe]

文脈から typo と解釈しました。querySelector() -> querySelectorAll()

Answer 3

<script>
window.addEventListener('load', e =>{
  function handleDragStart(e) {
    this.textContent='Drag: (' + String(e.pageX) + ',' + String(e.pageY) + ')'
  }
  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
  }
  function handleDrop(e) {
    this.textContent='Drop: (' + String(e.pageX) + ',' + String(e.pageY) + ')'
  }
  document.querySelectorAll('.column').forEach(col => {
    col.setAttribute('draggable', 'true');
    col.addEventListener('dragstart', handleDragStart, false);
    col.addEventListener('dragover', handleDragOver, false);
    col.addEventListener('drop', handleDrop, false);
  });
});
</script>
<style>
.column {
    height: 50px;
    width: 150px;
    border: solid;
    text-align: center;
}
</style>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>

Answer 4

方法論としては色々あります。

• getElementById() ... 一つを取得するものなので複数回実行するか、バブリングを利用する（shinji709さんの手法）
• getElementsByName() ... 複数を取得するもので。フォーム内に重複しない場合は [0] です。

[1], [2] とする事例は input[type=checkbox] や input[type=radio] のような時ですね。

他の方も回答していますが、querySelector() や querySelectorAll() は、セレクタを意識できます。

getElementById()でIDを複数指定したい

複数回指定での動くサンプル です。イベント対象要素の id リストを配列化してイベント定義してみました。

お手元のコードの div#target2 は再確認してくださいね。（id=target2"ダブルクォート忘れ）

Answer 5

質問文編集ありがとうございました。
クリックする要素と表示先要素の対応関係をオブジェクトやMapなどで持っておき、
クリックする要素すべてを含む先祖要素（<body>とか）にイベントを設定してそこで判定するのはどうでしょうか。

// 今回はオブジェクトで、クリックされる要素のidと、表示する要素のname属性を持たせました。
// nameは重複する可能性があるので、本当は表示する要素もidで指定できたほうがいいです。
const mapClickElemIdToDisplayElemName = {
  target:  'name',
  target2: 'name2',
  target3: 'name3',
};
// 今回は<body>要素にイベントリスナを設定し、event.targetで実際にクリックされた要素を取得します
document.body.addEventListener('click', event => {
    const clickedElemId = event.target.id;
    // 上でオブジェクトのキーに指定したidである場合のみ表示処理をする
    if (clickedElemId in mapClickElemIdToDisplayElemName) {
      const displayElemName = mapClickElemIdToDisplayElemName[clickedElemId];
      const kimetu = event.pageX ; // 水平の位置座標
      const yaiba = event.pageY ; // 垂直の位置座標
      document.querySelector(`[name=${displayElemName}]`).value = kimetu + ":" + yaiba;
    }
});

こちら確認コードです