Element.querySelector - undefined

Question

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

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 questions in the code:

• Perhaps you are repeating some text nodes that do not have a method .querySelector().
• You do not initialize your loop iteration variable for i
• You have an undeclared variable lineBoxListthat you are trying to use.

You can simplify things by simply using .querySelectorAll()and letting the selector do more 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 - , HTML. childNodes node, (, ).

, , :

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