JavaScript classlist selector error

Question

I'm getting this error "app_copy.js:13 Uncaught TypeError: Cannot read property 'remove' of undefined" and am not sure why. When you click on the first button I want those buttons removed and two hidden buttons to show. Why am I getting this error when I click on the first button? It works if I use document.querySelector and remove a single one but not if I use document.querySelectorAll like I'm trying to do here. Thanks!

Codepen: http://codepen.io/abharms/pen/BKvYvL

HTML

<div class="wrapper">

  <a class="numberButtons first" href="#">1</a>
  <a class="numberButtons second" href="#">2</a>
  <a class="numberButtons third" href="#">3</a>

 <a class="yesNo hide" href="#">Yes</a>
 <a class="yesNo hide" href="#">No</a>
</div>

CSS

body {
background-color: #74c7d5;  
}
.wrapper {
text-align: center;
margin-top: 200px;
}
.wrapper a {
text-decoration: none;
padding: 10px 15px 10px 15px;
margin: 10px;
border: 1px solid white;
color: #9965a8;
border-radius: 5px;
}
.wrapper a:hover {
background-color: white;
color: #74c7d5;
}
.hide {
display: none;
}

JavaScript

var numberButtons = document.querySelectorAll(".numberButtons");
var yesNo = document.querySelectorAll(".yesNo");
var first = document.querySelector(".first");
var second = document.querySelector(".second");
var third = document.querySelector(".third");


function numberButtonsLoop() {
for(var i = 0; i < numberButtons.length; i++)
numberButtons[i].addEventListener("click", function(){
var clickedOption = this;
        if(clickedOption === first) {
            yesNo.classList.remove("yesNo");
            numberbuttons.classList.add("hide");
        }   
    });     
};              


numberButtonsLoop();

Possible duplicate of [querySelectorAll: manipulating nodes](http://stackoverflow.com/questions/6309816/queryselectorall-manipulating-nodes) — Andreas, May 11 '16 at 10:48

score 0 · Accepted Answer · answered May 11 '16 at 10:46

Your variables yesNo, and numberbuttons, each hold a collection of HTML element nodes returned from document.querySelectorAll(), even if those collection are comprised of only one element; to remove the class-name from all elements in that collection you'd have to iterate over each element node in turn:

if(clickedOption === first) {
    // Array.from() converts the array-like collection
    // into an Array upon which we can use the
    // Array.prototype.forEach() method to iterate over
    // the newly-formed Array:
    Array.from( yesNo ).forEach(function(element){
        element.classList.remove("yesNo");
    });
    Array.from( numberbuttons ).forEach(function(element){
        element.classList.add("hide");
    });
}

You're very welcome, I'm glad to have been of help! :) – David Thomas May 11 '16 at 16:59 — David Thomas, May 11 '16 at 16:59

score 0 · Answer 2 · answered May 11 '16 at 10:48

Due to the query selectors returning an array of elements (since you are selecting by className), you need to loop through all elements in the array when you remove/add the class.

This error was present for both adding a class name to the numberButtons and yesNo elements. I have fixed both in my snippet.

var numberButtons = document.querySelectorAll(".numberButtons");
var yesNo = document.querySelectorAll(".yesNo");
var first = document.querySelector(".first");
var second = document.querySelector(".second");
var third = document.querySelector(".third");


function numberButtonsLoop() {
for(var i = 0; i < numberButtons.length; i++)
  numberButtons[i].addEventListener("click", function(){
    var clickedOption = this;
    if(clickedOption === first) {
      for(var i=0; i<yesNo.length; i++) {
        yesNo[i].classList.remove("yesNo");
      }
      for(var i=0; i<numberButtons.length; i++) {
        numberButtons[i].classList.add("hide");
      }
    }   
  });     
};              


numberButtonsLoop();

body {
background-color: #74c7d5;  
}
.wrapper {
text-align: center;
margin-top: 200px;
}
.wrapper a {
text-decoration: none;
padding: 10px 15px 10px 15px;
margin: 10px;
border: 1px solid white;
color: #9965a8;
border-radius: 5px;
}
.wrapper a:hover {
background-color: white;
color: #74c7d5;
}
.hide {
display: none;
}

<div class="wrapper">

  <a class="numberButtons first" href="#">1</a>
  <a class="numberButtons second" href="#">2</a>
  <a class="numberButtons third" href="#">3</a>

 <a class="yesNo hide" href="#">Yes</a>
 <a class="yesNo hide" href="#">No</a>
</div>

JavaScript classlist selector error

2 Answers2