DOM nie aktualizuje się po dodaniu klasy do elementu div?

Próbuję napisać program, który zbiera wszystkie nazwy klas w div, przechowuje je w array i popycha je wszystkie z powrotem do DOM z klasy o nazwie blue na końcu, to jest HTML:DOM nie aktualizuje się po dodaniu klasy do elementu div?

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>some title</title> 
    <style> 
    .blue{ 
     width: 200px; 
     height: 200px; 
     background: blue; 
    } 
    </style> 
</head> 
<body> 

    <div class="someClass otherClass" id="box"></div> 
    <button id="btn">click</button> 

</body> 
</html>

Chodzi o to, że wiem, jak uzyskać wszystkie nazwy klas wewnątrz div, a nawet jak wcisnąć blue (na btn kliknięcie) wewnątrz tego elementu div razem z innymi wartościami, które zebrałem, ale dlaczego nie jest to niebieskie pudełko pokazywać się? czego mi brakuje?

var domManipulation = function(){ 
     var box = document.querySelector('#box'); 
     var btn = document.querySelector('#btn'); 
     var class_list = []; 

     if(box.classList.length > 0){ 
     for(var i = 0; i < box.classList.length; i++){ 
      class_list.push(box.classList[i]); 
     } 
     } 

     btn.addEventListener('click', function(){ 
      class_list.push("blue"); 
      box.classList.add(class_list); 
      console.log(class_list); 
     }); 

}();

Oto JsBin i nie mogę używać jQuery btw.

Źródło

2016-01-02 Student

Możliwy duplikat [Jak dodać/usunąć klasę w JavaScript?] (Http://stackoverflow.com/questions/6787383/how-to-add-remove-a- class-in-javascript) –

Wiem, jak dodać/popchnąć, problem polega na tym, że oczekiwałem, że niebieskie pole pojawi się po kliknięciu przycisku. Mogę zmienić pytanie, ponieważ myślę, że to wprowadza w błąd. – Student

Tak, wierzę, że to może być - reword jako sposób, w jaki on się znajduje, dodanie "niebieskiej" klasy wydaje się być tutaj problemem ... także oznacz, JAK wiesz, że klasa została/jest dodana właściwie itd. –

To jest problem:

box.classList.add(class_list);

nie można dodać cały szereg klas, ponieważ kończy się bycie oddzielonych przecinkami.

var domManipulation = function() { 
 
    var box = document.querySelector('#box'); 
 
    var btn = document.querySelector('#btn'); 
 
    var class_list = []; 
 

 
    if (box.classList.length > 0) { 
 
    for (var i = 0; i < box.classList.length; i++) { 
 
     class_list.push(box.classList[i]); 
 
    } 
 
    } 
 

 
    btn.addEventListener('click', function() { 
 
    class_list.push("blue"); 
 
    class_list.forEach(function(e){ 
 
     box.classList.add(e); 
 
    }) 
 
    console.log(class_list); 
 
    }); 
 

 
}();

#box {height: 50px; background: #eee} 
 
#box.blue {background: blue}

<div class="someClass otherClass" id="box"></div> 
 
<button id="btn">click</button>

Źródło

2016-01-02 18:40:03 Shomz

Tak, jestem pewien, że OP chce' box.className = class_list.join (''); ' –

Tak, Podałem również przykład iteracji listy i zachowania "classList.add". – Shomz

Próbowałem 'className', ale tak naprawdę nie działa. Ta odpowiedź całkiem dobrze działa, dzięki kolego. – Student

DOM nie aktualizuje się po dodaniu klasy do elementu div?

Odpowiedz

Powiązane problemy