Добавление из одного div в другой с javascript с appendchild (не работает) - PullRequest
Новая
       8

Добавление из одного div в другой с javascript с appendchild (не работает)

0 голосов
/ 14 января 2020

Привет, так что я пытаюсь создать "Веб-сайт", где вы можете добавлять и удалять людей из списка и добавлять в другой. Добавление работает, но удаление не работает должным образом. Как вы можете видеть, предложения добавления и удаления очень похожи друг на друга, единственное отличие - идентификатор в getElementById(). 

let names = [];
names[0] = "Daniel";
names[1] = "Anna";
names[2] = "Sarah";
names[3] = "Karl";
names[4] = "Tim";
names[5] = "Simon";
names[6] = "Klara";
names[7] = "David";
names[8] = "Hugo";

document.getElementById("add").addEventListener("click",add);

document.getElementById("remove").addEventListener("click",remove);

for(let i = 0; i < 9; i++){
    document.getElementById("participants").innerHTML += "<div class='normal' id='"+names[i]+"'>"+names[i]+"</div>";
}

for(let i = 0; i < 9; i++){
    document.getElementById(names[i]).addEventListener("click",chosen); 
}

function chosen(){
    let item = document.getElementById(this.id);
    if(item.classList.contains("chosen")){
        item.classList.remove("chosen");
    }else{
        item.classList.add("chosen");
    }
}

function add(){
    let arr = [];
    arr = document.getElementsByClassName("chosen");

    for(let i = 0; i < arr.length; i++){
        document.getElementById("members").appendChild(arr[i]);
    }
}

function remove(){
    let test = []; 
    test = document.getElementsByClassName("chosen");
    console.log(test);

    for(let i = 0; i < test.length; i++){
        document.getElementById("participants").appendChild(test[i]);
    }
}

Ответы [ 3 ]

0 голосов
/ 14 января 2020

Послушайте, вы можете передать параметр id выбранной функции, таким образом вы получите правильный элемент.

Таким образом:

До 

document.getElementById(names[i]).addEventListener("click",chosen)
.
.
.
function chosen() { 
        let item = document.getElementById(this.id);
        if(item.classList.contains("chosen"))
           item.classList.remove("chosen");
        else
           item.classList.add("chosen");
}

После 

document.getElementById(names[i]).addEventListener("click",chosen(names[i])
.
.
.
function chosen(chosenId) { 
    const item = document.getElementById(chosenId);
    item.classList.toggle("chosen")
}

И попробуйте всегда использовать const переменные в сценарии ios, как это, это дает большую предсказуемость вашему коду

0 голосов
/ 14 января 2020

у вас было несколько ошибок в коде, выбранный класс не очищался после добавления и удаления элементов, не все элементы были добавлены или удалены. следующие решения этих проблем. Я советую вам сделать его рефакторингом и сделать его более обобщенным c, если вам понадобится помощь. ping me. 

const names = ["Daniel", "Anna", "Sarah", "Karl", "Tim" ,"Simon", "Klara", "David"];

document.getElementById("add").addEventListener("click",add);

document.getElementById("remove").addEventListener("click",remove);



for(let i = 0; i < names.length; i++){
    document.getElementById("participants").innerHTML += "<div class='normal' id='"+names[i]+"'>"+names[i]+"</div>";

}
for(let i = 0; i < names.length; i++){

    document.getElementById(names[i]).addEventListener("click",chosen); 
}

function chosen(){
    let item = document.getElementById(this.id);

        if(item.classList.contains("chosen")){
            item.classList.remove("chosen");

        }else{
            item.classList.add("chosen");

        }

}

function add(){
    members = document.getElementById("members");
    Array.from(document.querySelectorAll(".chosen")).forEach((item)=> { 
        members.append(item)
        item.classList.remove("chosen");
    })  
}

function remove(){
    participants = document.getElementById("participants");
    Array.from(document.querySelectorAll(".chosen")).forEach((item)=> { 
        participants.append(item)
        item.classList.remove("chosen");
    })  
}
0 голосов
/ 14 января 2020

Вы могли бы иметь лучший подход, если сначала добавите элементы и установите прослушиватель событий, прослушивая click в родительском элементе. В зависимости от цели, вы бы отправили функцию chosen.

Для этого вы можете использовать всплывающее окно событий. при создании отдельных операторов for не гарантируется, что элемент будет в DOM сразу после завершения выполнения оператора for. 

var participants = document.getElementById('participants');

participants.onclick = function(event){
   var id = event.target.id;

   if(id){
      let item = document.getElementById(this.id);
       if(item.classList.contains("chosen")){
          item.classList.remove("chosen");
        }else{             
          item.classList.add("chosen");

       }
 //... the rest of your code
   }
}
...