要素を行き来させたい

Question

前提・実現したいこと

左の要素をクリックすると右に、右に移った要素をクリックすると左に移るようにしたいです。

初期の要素数は左に5個、右に０個で考えてます。

発生している問題・エラーメッセージ

左から右へ移すのは自力で解決しましたが、右から左に移すことができません。

右側のclassName.lengthが初期は0個で、左から移しても何かをしないと再読み込みせずに0個のままだということは分かったのですが、どうすれば移した数を取得できるのかがわかりませんでした。

cloneNodeにこだわっているわけではないので、他の方法があったらそちらを教えてほしいです。

該当のソースコード

     <select id="left" multiple>
       <option class="Leftoption">1</option>
       <option class="Leftoption">2</option>
       <option class="Leftoption">3</option>
       <option class="Leftoption">4</option>
       <option class="Leftoption">5</option>
     </select>


     <select id="right" multiple>
     </select>




   var left = document.getElementsByClassName('left');
   var right = document.getElementsByClassName('right');

   for(var i = 0; i < left.length; i++){
     left[i].addEventListener('click',function(){
       var copyLeft = this.cloneNode(true)
       right.appendChild(copyLeft);
       this.remove();
     });
   }

   for(var i = 0; i < right.length; i++){
     right[i].addEventListener('click',function(){
       var rightCopy = this.cloneNode(true);
       left.appendChild(rightCopy);
       this.remove();
     });
   }

Answer 1

原因は、左右入れ替えるイベントをoptionにaddする際、初期状態の側から反対側へ移動させる処理しかaddしていないからです。

クリックした際にどちらのselectに所属しているか判断し逆側へ移動させるような処理にしなければなりません。
また、ノードの移動はcloneNode->removeよりは、appendChildで親要素に追加する実装の方が間違いが少なくで済むと思います。

検証コード：

// optionノードに対し「クリックされたら逆側へ移動する」イベントリスナを付与する。
var options = document.querySelectorAll('option');
options.forEach( e => e.addEventListener('click', function(){
  // 付与されているクラスでどちら側のselectに所属しているか判断し、
  // 逆側のselectへの移動とクラスの付け替えを行う。
  if(this.classList.contains("Leftoption")){
    // Leftoptionクラスがついていたら、right側へ自分自身をappendChild
    document.querySelector('#right').appendChild(this);
    // Leftoptionクラスを削除
    this.classList.remove('Leftoption');
    // Rightoptionクラスを追加
    this.classList.add('Rightoption');
  }else if(this.classList.contains("Rightoption")){
    // Right側も同様
    document.querySelector('#left').appendChild(this);
    this.classList.remove('Rightoption');
    this.classList.add('Leftoption');
  }
}));

codepenでの検証デモ

Comments

[退会済みユーザー]

動かない原因までご丁寧にありがとうございます！

理解ができてきちんと動きました！

Answer 2

こんな感じですか？

var left = document.getElementById('left');
var right = document.getElementById('right');


document.querySelectorAll('option').forEach(
    el => el.addEventListener('click', () =>
        el.parentElement === left ?
            right.appendChild(el) :
            left.appendChild(el)
    )
)

Comments

[退会済みユーザー]

ありがとうございます！

無事に動きました！