CODEWITHSUNDEEP
javascripthtmlcss
Taylor Johnson
Taylor Johnson

Reputation: 484

HTML Template Rendering - Odd behavior

See the Pen Inventory-Bananza by Chris Johnson (@johnsoct) on CodePen.

The issue I'm experiencing is at this line of code:

// Item's inventory state: in stock || order
console.log(container);
if (item.numLeft <= 100) container.classList.add('bg-order');

I'm trying to render certain template containers red if they are below a certain .numLeft, but once it finds the first item.numLeft below the threshold (100), all the following containers are red. I'm not sure if I'm not understanding how templates work or I'm doing something incorrectly while iterating over the items.

Upvotes: 0

Views: 53

Answers (1)

mtr.web
mtr.web

Reputation: 1515

The element that is being rendered is a clone of the last one. So, you have to remove the class in the case that it is > 100, and this can be done just by adding an else statement:

// Item's inventory state: in stock || order
console.log(container);
if (item.numLeft <= 100) {
    container.classList.add('bg-order'); 
} else { 
    container.classList.remove('bg-order');
}

Upvotes: 1

Related Questions