Element.querySelector is undefined

Question

Why does this code throw an error in the console reading TypeError: pizzaBox.querySelector is not a function. (In 'pizzaBox.querySelector('h6')', 'pizzaBox.querySelector' is undefined)?

function addToppingsToAll (toppings)
{
    var pizzaBoxHolder = document.getElementById("PizzaBoxHolder");
    var PizzaBoxList   = pizzaBoxHolder.childNodes;
    for ( var i = 0 ; i < pizzaBoxList.length ; i++ )
    {
        var pizzaBox            = pizzaBoxList[i];
        toppingList             = pizzaBox.querySelector('h6');
        toppingList.textContent = "You have " + toppings " on your pizza";
    }
}

Answer 1

There are at least three isssues in your code:

1. You are probably iterating through some text nodes which don't have a .querySelector() method.
2. You are not initializing your for loop iteration variable i
3. You have an undeclared variable lineBoxList you are attempting to use.

You can simplify things by just using .querySelectorAll() and letting the selector do more of the work for you.

function addToppingsToAll (toppings) {
    var toppingItems = document.querySelectorAll("#PizzaBoxHolder h6");
    for (var i = 0; i < toppingItems.length; i++) {
        toppingItems[i].textContent = "You have " + toppings " on your pizza";
    }
}

Answer 2

querySelector is a method that appears on HTML Element Nodes. One or more of the childNodes must be some kind of node that is not an Element (such as Text Nodes or Comment Nodes).

This is probably most easily resolved with:

var PizzaBoxList   = document.querySelector("#PizzaBoxHolder > *");