We Keep Coding

Why is the '.value' property not working?

function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
console.log(price * quantity)
}
}
<div class="center-cart-items">
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image" src="#" width="100" height="100" />
<span class="cart-item-title"> T-shirt</span>
</div>
<span class="cart-price cart-column"> $29.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2" />
<button class="btn-remove" role="button">REMOVE</button>
</div>
</div>
When I run the code, I get a source error that says
Cannot read properties of undefined (reading 'value')
Not sure what is going on here, I am new to all of this and following guides to help me build.

The bug occurs before the reference to cartRows. There is no .center-cart-items class in the snippet you gave, and if you delete the reference to it, your code works fine (see snippet).
Check your complete html source, the js reference to assign cartItemContainer is probably the problem.
function updateCartTotal() {
//var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
var cartRows = document.getElementsByClassName('cart-row')
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
console.log(price * quantity)
}
return (price * quantity);
}
console.log(updateCartTotal());
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image" src="#" width="100" height="100" />
<span class="cart-item-title"> T-shirt</span>
</div>
<span class="cart-price cart-column"> $29.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2" />
<button class="btn-remove" role="button">REMOVE</button>
</div>
</div>

I have recreated your code in codePen and it works fine:
https://codepen.io/SweetChillyPhilly/pen/xxpjyNQ
<div class="center-cart-items">
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image" src="#" width="100" height="100" />
<span class="cart-item-title"> T-shirt</span>
</div>
<span class="cart-price cart-column"> $29.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2" />
<button class="btn-remove" role="button">REMOVE</button>
</div>
</div>
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image" src="#" width="100" height="100" />
<span class="cart-item-title"> T-shirt</span>
</div>
<span class="cart-price cart-column"> $29.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2" />
<button class="btn-remove" role="button">REMOVE</button>
</div>
</div>
<div class="cart-row">
<div class="cart-item cart-column">
<img class="cart-item-image" src="#" width="100" height="100" />
<span class="cart-item-title"> T-shirt</span>
</div>
<span class="cart-price cart-column"> $29.99</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="2" />
<button class="btn-remove" role="button">REMOVE</button>
</div>
</div>
</div>
JS:
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('center-cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
console.log(price * quantity)
}
}
updateCartTotal();
Your console log is working as expected.
So i suspect your issue lies outside of this code.

How to handle multiple delete buttons JS

I'm having trouble handling multiple buttons to delete items on a cart page. I read about parentNode, operators delete, remove but none seem to work. Here's the code.
HTML:
<section id="cart__items">
<article class="cart__item" data-id="{product-ID}">
<div class="cart__item__img">
<img id ="image" alt="Photographie dun canapé">
</div>
<div class="cart__item__content">
<div class="cart__item__content__titlePrice">
<h2 class=title></h2>
<p class =price></p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p class= quantity>Qté : </p>
<input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value="">
</div>
<div class="cart__item__content__settings__delete">
<p class="deleteItem">Supprimer</p>
</div>
</div>
</div>
</article>
JS:
let removeCart = Array.prototype.slice.call(document.getElementsByTagName('article'), 0);
for (let i = 0; i < removeCart.length; i++) {
let removeItems = (removeCart[i]);
console.log(removeItems)
let removeButton = document.getElementsByClassName('deleteItem');
for (let i = 0; i < removeButton.length; i++) {
removeButton[i].addEventListener("click", function (event) {
removeItems.remove(removeCart[i])
})
}
So as you can see, this allows me to delete entirety of the cart content. How could I set each buton to delete the article (and its localStorage) inside which they exist? If any of you could help that'd be great.

Snippet below makes use of event delegation
If you were to dynamically create all the cart items, manually attaching event listeners wouldn't be possible.
In order to handle LocalStorage update (not quite sure of its structure since you haven't provided anything) I assume you're utilizing some sort of product-id or data-id, so just filter out the id and set localstorage again.
// pass the id of item to be deleted
const updateCartLocalStorage = (cartItemId) => {
const currentCartLS = JSON.parse(localStorage.getItem('cart'));
const updatedCartLS = currentCartLS.filter(c => c.id !==
cartItemId);
localStorage.setItem('cart', JSON.stringify(updatedCartLS));
}
const cartItemsSection = document.querySelector('#cart__items');
const handleDeleteItem = (e) => {
// if user clicks on delete item, find and remove the parent article
if (e.target.classList.contains('deleteItem')) {
const parentArticle =
e.target.parentElement.parentElement.parentElement.parentElement;
console.log(parentArticle.dataset.id);
parentArticle.remove();
updateLocalCartLocalStorage(<id>);
} else {
return;
}
};
cartItemsSection.addEventListener('click', handleDeleteItem);
// alternative solution (to get rid of stacking .parentElement...)
const cartArticles = document.querySelectorAll('.cart__item');
const deleteCartItem = (e) => {
if (e.target.classList.contains('deleteItem')) {
const parent = e.currentTarget;
parent.remove();
updateLocalCartLocalStorage(<id>);
} else {
return;
}
};
cartArticles.forEach((article) => {
article.addEventListener('click', deleteCartItem);
});
<section id="cart__items">
<article class="cart__item" data-id="1" style="background-color: blue">
<div class="cart__item__img">
<img id="image" alt="Photographie dun canapé" />
</div>
<div class="cart__item__content">
<div class="cart__item__content__titlePrice">
<h2 class="title"></h2>
<p class="price"></p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p class="quantity">Qté :</p>
<input
type="number"
class="itemQuantity"
name="itemQuantity"
min="1"
max="100"
value=""
/>
</div>
<div class="cart__item__content__settings__delete">
<button class="deleteItem">Supprimer</button>
</div>
</div>
</div>
</article>
<article class="cart__item" data-id="2" style="background-color: red">
<div class="cart__item__img">
<img id="image" alt="Photographie dun canapé" />
</div>
<div class="cart__item__content">
<div class="cart__item__content__titlePrice">
<h2 class="title"></h2>
<p class="price"></p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p class="quantity">Qté :</p>
<input
type="number"
class="itemQuantity"
name="itemQuantity"
min="1"
max="100"
value=""
/>
</div>
<div class="cart__item__content__settings__delete">
<button class="deleteItem">Supprimer</button>
</div>
</div>
</div>
</article>
<article class="cart__item" data-id="3" style="background-color: green">
<div class="cart__item__img">
<img id="image" alt="Photographie dun canapé" />
</div>
<div class="cart__item__content">
<div class="cart__item__content__titlePrice">
<h2 class="title"></h2>
<p class="price"></p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p class="quantity">Qté :</p>
<input
type="number"
class="itemQuantity"
name="itemQuantity"
min="1"
max="100"
value=""
/>
</div>
<div class="cart__item__content__settings__delete">
<button class="deleteItem">Supprimer</button>
</div>
</div>
</div>
</article>
<article class="cart__item" data-id="4" style="background-color: yellow">
<div class="cart__item__img">
<img id="image" alt="Photographie dun canapé" />
</div>
<div class="cart__item__content">
<div class="cart__item__content__titlePrice">
<h2 class="title"></h2>
<p class="price"></p>
</div>
<div class="cart__item__content__settings">
<div class="cart__item__content__settings__quantity">
<p class="quantity">Qté :</p>
<input
type="number"
class="itemQuantity"
name="itemQuantity"
min="1"
max="100"
value=""
/>
</div>
<div class="cart__item__content__settings__delete">
<button class="deleteItem">Supprimer</button>
</div>
</div>
</div>
</article>
</section>

Javascript document.ready repeat in loop (Without DRY)

I have an HTML code that contains 3 groups of radio buttons. each group has an active class in its images section. (In fact Active-1, Active-2 and Active-2 in the Image tag)
<!-------- Select Color ---------->
<div class="color-0">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
<label for="navy-blue-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
<label for="aqua-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
<label for="pink-0"><span></span></label>
</div>
</div>
<div class="color-1">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
<label for="navy-blue-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
<label for="aqua-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
<label for="pink-1"><span></span></label>
</div>
</div>
<div class="color-2">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
<label for="navy-blue-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
<label for="aqua-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
<label for="pink-2"><span></span></label>
</div>
</div>
<!-------- Show Image ---------->
<div class="img-0">
<!--- Active-0 --->
<img class="img-fluid active-0" data-image="navy-blue-0" src="img/img-navy-blue-0.png" alt="">
<img class="img-fluid" data-image="aqua-0" src="img/img-aqua-0.png" alt="">
<img class="img-fluid" data-image="pink-0" src="img/img-pink-0.png" alt="">
<img class="img-fluid" data-image="red-0" src="img/img-red-0.png" alt="">
<img class="img-fluid" data-image="white-0" src="img/img-white-0.png" alt="">
</div>
<div class="img-1">
<!--- Active-1 --->
<img class="img-fluid active-1" data-image="navy-blue-1" src="img/img-navy-blue-1.png" alt="">
<img class="img-fluid" data-image="aqua-1" src="img/img-aqua-1.png" alt="">
<img class="img-fluid" data-image="pink-1" src="img/img-pink-1.png" alt="">
<img class="img-fluid" data-image="red-1" src="img/img-red-1.png" alt="">
<img class="img-fluid" data-image="white-1" src="img/img-white-1.png" alt="">
</div>
<div class="img-2">
<!--- Active-2 --->
<img class="img-fluid active-2" data-image="navy-blue-2" src="img/img-navy-blue-2.png" alt="">
<img class="img-fluid" data-image="aqua-2" src="img/img-aqua-2.png" alt="">
<img class="img-fluid" data-image="pink-2" src="img/img-pink-2.png" alt="">
<img class="img-fluid" data-image="red-2" src="img/img-red-2.png" alt="">
<img class="img-fluid" data-image="white-2" src="img/img-white-2.png" alt="">
</div>
The problem now is that I had to write code three times in the JavaScript:
$(document).ready(function () {
$('.color-0 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-0').removeClass('active-0');
$('.img-0 img[data-image = ' + x + ']').addClass('active-0');
$(this).addClass('active-0');
});
});
$(document).ready(function () {
$('.color-1 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-1').removeClass('active-1');
$('.img-1 img[data-image = ' + x + ']').addClass('active-1');
$(this).addClass('active-1');
});
});
$(document).ready(function () {
$('.color-2 input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-2').removeClass('active-2');
$('.img-2 img[data-image = ' + x + ']').addClass('active-2');
$(this).addClass('active-2');
});
});
So I tried using loops but the code didn't work. like this:
var shoePart = [0, 1, 2, 3];
for (var i = 0; i < shoePart.length; i++) {
$(document).ready(function () {
$('.color-' + shoePart[i] + ' input').on('click', function () {
var x = $(this).attr('data-image');
$('.active-' + shoePart[i]).removeClass('active-' + shoePart[i]);
$('.img-' + shoePart[i] + ' img[data-image = ' + x + ']').addClass('active-' + shoePart[i]);
$(this).addClass('active-' + shoePart[i]);
});
});
}

You can add a common class on all three tags and an attribute of number. Then can call your jQuery on that as below:
<!-------- Select Color ---------->
<div class="color-0 common-color" attr-number="0">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-0" id="navy-blue-0" name="color-0" value="navy-blue-0" checked>
<label for="navy-blue-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-0" id="aqua-0" name="color-0" value="aqua-0">
<label for="aqua-0"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-0" id="pink-0" name="color-0" value="pink-0">
<label for="pink-0"><span></span></label>
</div>
</div>
<div class="color-1 common-color" attr-number="1">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-1" id="navy-blue-1" name="color" value="navy-blue-1" checked>
<label for="navy-blue-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-1" id="aqua-1" name="color-1" value="aqua-1">
<label for="aqua-1"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-1" id="pink-1" name="color-1" value="aqua-1">
<label for="pink-1"><span></span></label>
</div>
</div>
<div class="color-2 common-color" attr-number="2">
<!--- Checked --->
<div>
<input type="radio" data-image="navy-blue-2" id="navy-blue-2" name="color-2" value="navy-blue-2" checked>
<label for="navy-blue-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="aqua-2" id="aqua-2" name="color-2" value="aqua-2">
<label for="aqua-2"><span></span></label>
</div>
<div>
<input type="radio" data-image="pink-2" id="pink-2" name="color-2" value="aqua-2">
<label for="pink-2"><span></span></label>
</div>
</div>
and then can call jQuery as below:
$(document).ready(function () {
$('.common-color input').on('click', function () {
var x = $(this).attr('data-image');
var elemCounter = $(this).closest(".common-color").attr("attr-number");
$('.active-'+elemCounter).removeClass('active-'+elemCounter);
$('.img-'+ elemCounter +' img[data-image = ' + x + ']').addClass('active-'+elemCounter);
$(this).addClass('active-'+elemCounter);
});
});
Hope it helps you!!

calculate the sum of shopping cart

I want to calculate the total(sum) of all the purchases using the "+","-" to add and remove products from the shopping cart.It should display the amount on the left top corner in front of "total:".In front of each product, the total purchase of the single purchase is displayed.
Here a descriptive image
Here the html code:
<body>
<div class="shopping-cart">
<!-- Title -->
<div class="title">
Shopping Bag total :
</div>
<!-- Product #1 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-1.png" alt="" />
</div>
<div class="description">
<span>Common Projects</span>
<span>Bball High</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="549"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #2 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-2.png" alt=""/>
</div>
<div class="description">
<span>Maison Margiela</span>
<span>Future Sneakers</span>
<span>White</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="270"><input type="number" value="0" class="result-btn" /></div>
</div>
<!-- Product #3 -->
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
<img src="item-3.png" alt="" />
</div>
<div class="description">
<span>Our Legacy</span>
<span>Brushed Scarf</span>
<span>Brown</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button"><img src="plus.svg" alt="" /></button>
<input type="text" value="0" class="input-btn" />
<button class="minus-btn" type="button" name="button"><img src="minus.svg" alt="" /></button>
</div>
<div class="total-price" id="349"><input type="number" value="0" class="result-btn" /></div>
</div>
</div>
</body>
Here the JS code:
const items = document.querySelectorAll('.item');
items.forEach(function(item) {
const minusButton = item.querySelector('.minus-btn');
const plusButton = item.querySelector('.plus-btn');
const inputField = item.querySelector('.input-btn');
const resultField = item.querySelector('.result-btn');
minusButton.addEventListener('click', function minusProduct() {
const currentValue = Number(inputField.value);
if (currentValue > 0) {
inputField.value = currentValue - 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
} else inputField.value = 0
});
plusButton.addEventListener('click', function plusProduct() {
const currentValue = Number(inputField.value);
if (currentValue < 100) {
inputField.value = currentValue + 1;
var x = item.querySelector('.total-price').id;
resultField = item.querySelector('.result-btn').value = x* inputField.value;
document.querySelector('.title').innerHTML = item.querySelector('.result-btn')[0].value
+item.querySelector('.result-btn')[1].value + item.querySelector('.result-btn')[2].value
} else inputField.value = 100
});
});

There are two thing that you need to do.
1. You need to convert value of total price and total price to number.
2. Set the innneHTML of dev other wise you will get the error. e.g. (
Uncaught TypeError: Assignment to constant variable.
at HTMLButtonElement.minusProduct)
So, in your JS
resultField.innerHTML = item.querySelector('.result-btn').value = Number(x) * Number(inputField.value);

Hiding a div if a value is under 1

I want the application to behave this way so that when I click on "Show Order" if any of the values are 0 or blank, I don't want div id item * x be shown:
var divs = document.getElementsByTagName('div');
var toggle = function() {
for (var i = 0, l = divs.length; i < l; i++) {
if (divs[i].getAttribute('class') == 'problem')
if (divs[i].style.display == 'none') divs[i].style.display = '';
else divs[i].style.display = 'none';
var x = document.getElementById("mySelect").value;
var y = document.getElementById("item1").value;
if (x < 1) {
y.style.display === "none"
} else {
document.getElementById("demo").innerHTML = x;
}
var x = document.getElementById("mySelect1").value;
document.getElementById("demo1").innerHTML = x;
var x = document.getElementById("mySelect2").value;
document.getElementById("demo2").innerHTML = x;
}
}
document.getElementById('Toggle').onclick = toggle;
<div class="problem">
<div class="row">
<div class="col-3">
<form>
<input type="number" id="mySelect" name="mySelect" autocomplete="off" style="width: 3em;"> Sausage
<br>
</form>
</div>
<div class="col-3">
<form>
<input type="number" id="mySelect1" name="mySelect1" autocomplete="off" style="width: 3em;"> Pancake
<br>
</form>
</div>
<div class="col-2">
<form>
<input type="number" id="mySelect2" name="mySelect2" autocomplete="off" style="width: 3em;"> Milk
</form>
</div>
<div class="col-4">
</div>
</div>
<div class="row">
<div class="col-12">
<p>
<button type="button" class="button" id="Toggle" onclick="myFunction()">Show Order</button>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div style="display:none;" class="problem">Please show this to the cashier.</div>
<div style="display:none;" class="problem">
<h2>Hello, they ordered:</h2>
</div>
<div id="item1" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo"></span>x Sausage(s)</h2>
</div>
<div id="item2" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo1"></span>x Pancake(s)</h2>
</div>
<div id="item3" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo2"></span>x Cup of Milk(s)</h2>
</div>
<div style="display:none;" class="problem">
<h2>Thank you</h2>
</div>
<div style="display:none;" class="problem">Please refresh your browser to restart your order</div>
</div>
</div>
I have added my full code from JSFiddle here.

Check this simpler approach
Give a display class to div to be div to be toggled
Check for any input values to be >= 1
Demo
var toggle = function() {
var x1 = Number(document.getElementById("mySelect").value);
var x2 = Number(document.getElementById("mySelect1").value);
var x3 = Number(document.getElementById("mySelect2").value);
document.querySelectorAll(".display .problem").forEach(function(el) {
el.style.display = x1 >= 1 || x2 >= 1 || x3 >= 1 ? "block" : "none";
});
document.getElementById("demo").innerHTML = (x1 || 0);
document.getElementById("demo1").innerHTML = (x2 || 0);
document.getElementById("demo2").innerHTML = (x3 || 0);
}
document.getElementById('Toggle').onclick = toggle;
<div class="problem">
<div class="row">
<div class="col-3">
<form>
<input type="number" id="mySelect" name="mySelect" autocomplete="off" style="width: 3em;"> Sausage
<br>
</form>
</div>
<div class="col-3">
<form>
<input type="number" id="mySelect1" name="mySelect1" autocomplete="off" style="width: 3em;"> Pancake
<br>
</form>
</div>
<div class="col-2">
<form>
<input type="number" id="mySelect2" name="mySelect2" autocomplete="off" style="width: 3em;"> Milk
</form>
</div>
<div class="col-4">
</div>
</div>
<div class="row">
<div class="col-12">
<p>
<button type="button" class="button" id="Toggle" onclick="myFunction()">Show Order</button>
</p>
</div>
</div>
</div>
<div class="row display">
<div class="col-12">
<div style="display:none;" class="problem">Please show this to the cashier.</div>
<div style="display:none;" class="problem">
<h2>Hello, they ordered:</h2>
</div>
<div id="item1" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo"></span>x Sausage(s)</h2>
</div>
<div id="item2" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo1"></span>x Pancake(s)</h2>
</div>
<div id="item3" style="display:none;" class="problem">
<h2><span style="font-size: xx-large; color: green;" id="demo2"></span>x Cup of Milk(s)</h2>
</div>
<div style="display:none;" class="problem">
<h2>Thank you</h2>
</div>
<div style="display:none;" class="problem">Please refresh your browser to restart your order</div>
</div>
</div>

You can loop through all the divs with class="problem" and check their input's values. If there's nothing, then don't show it. If it isn't empty, show it.
You can achieve this with var allDivs = querySelectorAll('.problem input'); to get the inputs in the divs (since we know they have class="problem"), and then loop through that and use an if to check allDivs[i].value.
I didn't want to give the code directly, so hopefully this helps answer your question!

Here you are :
`https://jsfiddle.net/1znqk6us/1/`
I've removed onlick event on button because you don't use this, and for loop.