8

I'm trying to write a program that collects all class names in a div, stores them in an array and pushes them all back to the DOM with a class called blue at the end, this is the HTML:

<!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>

The thing is, I know how to get all the class names inside the div and even how to push blue (on btn click) inside of that div together with the other values I have collected but why isn't the blue box showing up? What am I missing?

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);
      });

 }();

Here is a JsBin and I can't use jQuery btw.

Student
  • 115
  • 1
  • 6
  • 1
    Possible duplicate of [How to add/remove a class in JavaScript?](http://stackoverflow.com/questions/6787383/how-to-add-remove-a-class-in-javascript) – Mark Schultheiss Jan 02 '16 at 18:34
  • I know how to add/push it, the problem is that I was expecting the blue box to show up after clicking the button. I might change the question because I think it's misleading. – Student Jan 02 '16 at 18:35
  • Yes I believe it might be - reword as the way it stands, adding "blue" class seems to be the issue here...also denote HOW you know that the class was/is added properly etc. – Mark Schultheiss Jan 02 '16 at 18:37
  • I know because I'm logging it and it shows up – Student Jan 02 '16 at 18:39
  • Will it validate whether the class name is just an attribute or it really exists in the `style` tag in the `head` section? – Mi-Creativity Jan 02 '16 at 18:39
  • You log the array but what about the DOM?, I suspect that the array with commas is not a proper class list herel Note that this is a "teaching" site thus I am NOT being snarky here just pointing out assumptions that seem to be made.... – Mark Schultheiss Jan 02 '16 at 18:40
  • the class `blue` does exist in the head section, I don't need to check if the class exists, I just need to push it to the dom sort of speak. – Student Jan 02 '16 at 18:43
  • @Mark Schultheiss you're right, I'm logging the array itself, how do I check if the DOM has received that class name? – Student Jan 02 '16 at 18:45
  • 1
    `var isBlue = document.getElementsByClassName('blue'); if (isBlue.length > 0) {` OR use the browser and the development tools... – Mark Schultheiss Jan 02 '16 at 18:48

1 Answers1

10

This is the problem: 

box.classList.add(class_list);

You can't add a whole array of classes because they end up being comma-separated.

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>
Shomz
  • 37,421
  • 4
  • 57
  • 85