addEventLisner 同じ名前の選択した要素のみををイベントを発生させたい

Question

下記は新しく作成した要素内の、文字の大きさを変化させるイベントです。
コードが長いので一部抜粋したものになります。

背景と流れ

画面上にノートの様な見た目をした要素があるとします。
その要素の中に下記のイベント処理をします。

１、ダブルクリックイベントで要素を作成(要素は複製して作成可能)
２、作成した要素に対して、右クリックイベントを行うとメニューが表示される(文字の大きさ、文字の色、背景色、画像、削除等)
３、メニュー内の文字の大きさに触れると文字の大きさメニューが表示される
４、文字の大きさメニューは左から、テキストボックス、↑、↓がありテキストボックスには文字の大きさを決める数字が入っており、
↑や↓をクリックする事でテキストボックスの数字が-+１ずつ増減する。

問題点：

要素を複数作成(ここでは3つとする)した状態で上記の４を行うと、
・テキストボックスの増減が -+3になる
・作成した要素に対して4のイベントが同時に行われる

作成した要素の名前(child)はすべて同じであり、それがまとめてaddEventListenerで
処理されているからこういう問題が起きたと思われる。

改善方法：

addEventListnerでなく、イベントを単体で処理するonClickイベントで処理を行う事にした。
もちろん改善はされたが新たな問題点が出た。

新たな問題点：

要素を個別で処理出来るようになったが、onclickイベントは一番最後に記述したコードしか処理されない。
つまり下記ソースコード↑部分と↓部分に同じonclickイベントがあるので、一番下にあるコードに上書きされて↓のイベントしか
行われない。

実現したいこと

・要素が複数あっても単体別で処理したい
・任意の要素を複数選択した場合に同時に処理が出来る様にしたい。
(例：要素0～4まで作成。要素1，3を選択してこの二つのみ同時にイベント処理を行いたい
エクセルで言うとctrlキーを押しながらセルを複数選択)

上記を作成する場合、単体の処理では不可能なのでonclickイベントは使用されないものと思います。
そうなるとAddEventListenerになると思いますが…
どなたかご教示お願いします。

***************************************イベント処理********************************

// 要素の作成
const doubleClick = (e) => {
   obj.elm = document.createElement('textarea');
   obj.elm.classList.add('child');
   const combine = obj.elm;   

      combine.onchange = () => {
         if(combine.value !== "") {
              combine.style.backgroundColor =  'transparent';
              combine.style.border = 'none';
              combine.style.resize = 'none';
       } else {
              combine.style.backgroundColor = 'white';
              combine.style.border = 'solid';
              combine.style.borderWidth = 'thin';
              }
      }
    elment.appendChild(obj.elm);
    obj.setPos(e);
    obj.elm = null; 
};



// 右クリックメニュー
const contextMenu = (e) => {
     const rightClick = document.querySelector('.menu');
     let t = e.target;
     if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
        rightClick.style.display = "block";
  
     if(t.getBoundingClientRect().top > 216) {
        rightClick.style.left =  t.getBoundingClientRect().left + 'px';
        rightClick.style.top =t.getBoundingClientRect().top - 216 + 'px';
   } else {
        rightClick.style.left =  t.getBoundingClientRect().left + 'px';
        rightClick.style.top =t.getBoundingClientRect().top + 30 + 'px'; 
   }
};


// 文字の大きさメニュー　右クリック➡文字の大きさ➡文字の大きさメニュー表示
const mouseMove2 = () => {
    fontMenu.style.display = "block";
};



// 文字の大きさメニュー 矢印↑クリック
const contextMenu2 = (e) => {
        let t = event.target;
        const test = t;
        if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
        
            fontUp.addEventListener('click', (e) => { 
                if(inputFont.value >= 64) {
                   alert('64以上の数値は入力できません')
                   return;
                   }    
                inputFont.value = Number(inputFont.value) + 1;  
                t.style.fontSize = Number(inputFont.value) + 'px';
           });
}


// 文字の大きさメニュー矢印↓クリック

const contextMenu3 = (e) => {
        let t = event.target;
        if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
       
        　  fontDown.addEventListener('click', (e) => { 
               if(inputFont.value >= 64) {
                  alert('64以上の数値は入力できません')
                  return;
               } 
               inputFont.value = Number(inputFont.value) - 1;  
               t.style.fontSize = Number(inputFont.value) + 'px';
           });    
}



//addEventListner→onclickに変更した場合
// 文字の大きさメニュー 矢印↑クリック
 element.oncontextmenu = (e) => {
      let t = event.target;
      if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
       
        　  fontUp.onclick = (e) => { 
               if(inputFont.value >= 64) {
                  alert('64以上の数値は入力できません')
                  return;
               } 
               inputFont.value = Number(inputFont.value) + 1;  
               t.style.fontSize = Number(inputFont.value) + 'px';
               } 
  }


// 文字の大きさメニュー矢印↓クリック
 element.oncontextmenu = (e) => {
        let t = event.target;
        if(t.nodeName != 'TEXTAREA' || !t.classList.contains('child')) return;
       
        　  fontDown.onclick = (e) => { 
               if(inputFont.value >= 64) {
                 alert('64以上の数値は入力できません')
                 return;
               } 
               inputFont.value = Number(inputFont.value) - 1;  
               t.style.fontSize = Number(inputFont.value) + 'px';
               } 
   }

Comments

[m.ts10806]

マークダウンのcodeできてないので、下記の質問など参照に「どうなっていればＯＫか」を確認したうえで質問内容調整してください。
https://teratail.com/questions/238564

[yambejp]

サイズはドット単位で設定しているようですが5段階くらいで抑えたほうがよいのでは？

Answer 1

もうすこし分からない部分を絞り込んで質問した方がよいですね
躓いたのはコンテキストメニューとテキストエリアの紐付けですか？

• codepen - contextmenu test

Comments

[rei78087487]

回答ありがとうございます。
また、アドバイスありがとうございます。

下記は現在のコードです。
https://codepen.io/mio-rei/pen/KKNLVKb
多々修正すべき点はお許しください。

説明がわかりづらく申し訳ございません、紐づけではないです。
作成した要素(テキストエリア)を複数作成した場合、作成した要素すべてに文字の大きさイベントが同時に発生してしまうという事です。
作成した要素に対して個別に文字の大きさをイベントとして処理したいのに、作成した要素にイベントが同時に起きてしまうので、そこで躓いています。
yambejp様の作成して頂いたコードの様に個別にかつ、
それに付随して任意の要素を複数選択した場合に同時に処理が出来る様にしたいです(上記内容)
もしこれが、紐づけに問題がある場合は申し訳ございません。

宜しくお願い致します。

[yambejp]

> もしこれが、紐づけに問題がある場合は申し訳ございません。

ごめんなさい、うまく回答が伝わっていないですね
テキストエリアに紐付いた値をコンテキストメニュー参照・変更したい
のですよね？それを「紐付け」と表現したのですが
うまく伝わらずにすみません。

ちなみに私のcodepenのソースがまさにそうなっていると思いますが
どこが想定と違うのかを指摘ください

[rei78087487]

早速の回答ありがとうございます。

テキストエリアに対する値の紐づけですね。
理解しました。
失礼致しました。

いえ、正に実現したい内容です。
ありがとうございます。
しかし、複数選択をして、選択した要素に対して同時にイベント処理するというのはJavascriptではできないのでしょうか？

[yambejp]

複数選択のインターフェースをどうしたいかによりますね
HTML自体にテキストエリアの複数選択UIはないと思いますが
なにか方針はありますか？
たとえばテキストエリアの前にチェックボックスをつけるとか・・・

[rei78087487]

現時点では方針という程ではありませんが、
yambejp様のヒントを元に考えた構想があります。
1.チェックボックスをを含めた要素を作成する(ダブルクリック)
<div
<input type=checkbox class=ip-class>
<textarea class=child>
</div>
2.作成した要素のどれかを右クリックしてメニューを表示
3.メニューに新たな項目(要素の選択)を追加する
<li class="elm">要素の選択</li>
4.(要素を選択）の項目をクリックすると隠れていたチェックボックスが表示される
const ipAll = document.querySelectorAll('.ip-class');
for (canvas of ipAll) {
canvas.style.display = 'initial';
}
});
5.イベントを発生させたい要素のチェックボックスにチェックを付ける
6.チェックのついた要素が、文字の大きさメニューのイベントをまとめて発生させることができる

この構想を元にコードを試作してみました。
※ここでは試用段階としてチェックボックスをtrueにしたら要素が非表示になる設定。
ですが、うまく行っているのは最後に作成した要素のみで、他の要素のチェックボックスをtrueにしても非表示になりません。
何卒ご教示頂きたくお願いします。

yambejp様のコードを元に作成しました、失礼します。
https://codepen.io/mio-rei/pen/mdRbPQj

[yambejp]

複数選択して調整する場合はcontextMenuは直感的ではないかもしれません。
専用の修正メニューを予め表示しておくなどの工夫が必要だと思います

[rei78087487]

回答ありがとうございます。
少し考えてみます。

この構想を元にコードを試作してました～
の件ですが、なぜ最後の要素しか非表示のイベントが起きないのでしょうか？