Develop Reference

Shopping Cart Update Total Function doesnt work

I am building an eCommerce store website, and I am facing an issue. The function updateCartTotal doesn't work at all. The script is also added to the bottom of the HTML body.
Thanks in advance.
HTML:
<span class="material-symbols-outlined" id="cart-icon">
shopping_cart
</span>
<div class="cart">
<h2 class="cart-title">Your Shopping Cart</h2>
<div class="cart-content">
<div class="cart-box">
<img src="/Monn-Homme/images/tie1.jpg" class="cart-image">
<div class="detail-box">
<div class="cart-product-title">
Tie
</div>
<div class="cart-price"> £10.99</div>
<input type="number" value="1" class="cart-qty">
</div>
<span class="material-symbols-outlined" id="cart-remove">
delete
</span>
</div>
</div>
<div class="total">
<div class="total-title">Total</div>
<div class="total-price">£10.99</div>
</div>
<button type="button" class="buy-btn">Buy Now</button>
<span class="material-symbols-outlined" id="close-cart">
close
</span>
</div>
</div>
Javascript:
let cartIcon = document.getElementById("cart-icon");
let cart = document.querySelector(".cart");
let CloseCart = document.querySelector("#close-cart");
cartIcon.onclick = () => {
cart.classList.add("active");
};
CloseCart.onclick = () => {
cart.classList.remove("active");
};
if (document.readyState == "loading") {
document.addEventListener("DOMContentLoaded", ready);
} else {
ready();
}
function ready() {
var removeCartButtons = document.getElementsByClassName("material-symbols-outlined");
for (var i = 0; i < removeCartButtons.length; i++) {
var button = removeCartButtons[i];
button.addEventListener("click", removeCartItem)
}
// Quantity Change //
var quantitInputs = document.getElementsByClassName("cart qty");
for (var i = 0; i < quantitInputs.length; i++) {
var input = quantitInputs[i];
input.addEventListener("change", quantityChanged);
}
}
function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.remove();
updateCartTotal();
}
quantityChanged = (event) => {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
}
function updateCartTotal() {
var cartContainer = document.getElementsByClassName("cart-content")[0];
var cartBox = cartContainer.getElementsByClassName("cart-box");
var total = 0
for (var i = 0; i < cartBox.length; i++) {
var cartBox = cartBox[i]
var priceElement = cartBox.getElementsByClassName("cart-price")[0]
var quantityElement = cartBox.getElementsByClassName("cart-qty")[0]
price = parseFloat(priceElement.innerText.replace("£", ""))
quantity = quantityElement.value
total = total + (price * quantity)
}
document.getElementsByClassName("total-price")[0].innerText = total
}
i am expecting the total to update as the quantity changes, and the function to work

You have the following mistakes-
There is no element with the class name cart qty.
var quantitInputs = document.getElementsByClassName("cart qty");
quantityChanged function should have a function keyword.
You are using the same name variable cartBox in updateCartTotal function which is creating confusion-
var cartBox = cartContainer.getElementsByClassName("cart-box");
for (var i = 0; i < cartBox.length; i++) {
var cartBox = cartBox[i]
}
Now, after fixing these mistakes, your code will look like the below which is working.
Note- I moved all the declarations to the top and I replaced those two methods-
getElementsByClassName() = querySelectorAll()
getElementsByClassName()[0] = querySelector()
let cartIcon = document.querySelector("#cart-icon");
let cart = document.querySelector(".cart");
let CloseCart = document.querySelector("#close-cart");
var quantitInputs = document.querySelectorAll(".cart-qty");
var removeCartButtons = document.querySelectorAll(".material-symbols-outlined");
var cartContainer = document.querySelector(".cart-content");
var cartBox = cartContainer.querySelectorAll(".cart-box");
var totalEl = document.querySelector(".total-price")
cartIcon.onclick = () => {
cart.classList.add("active");
};
CloseCart.onclick = () => {
cart.classList.remove("active");
};
if (document.readyState == "loading") {
document.addEventListener("DOMContentLoaded", ready);
} else {
ready();
}
function ready() {
for (var i = 0; i < removeCartButtons.length; i++) {
var button = removeCartButtons[i];
button.addEventListener("click", removeCartItem);
}
// Quantity Change //
for (var i = 0; i < quantitInputs.length; i++) {
var input = quantitInputs[i];
input.addEventListener("change", quantityChanged);
}
}
function removeCartItem(event) {
var buttonClicked = event.target;
buttonClicked.parentElement.remove();
updateCartTotal();
}
function quantityChanged(event) {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal();
};
function updateCartTotal() {
var total = 0;
for (var i = 0; i < cartBox.length; i++) {
var cartBoxEl = cartBox[i];
var priceElement = cartBoxEl.querySelector(".cart-price");
var quantityElement = cartBoxEl.querySelector(".cart-qty");
price = parseFloat(priceElement.innerText.replace("£", ""));
quantity = quantityElement.value;
total = total + price * quantity;
}
if (totalEl) {
totalEl.innerText = total;
}
}
<div>
<span class="material-symbols-outlined" id="cart-icon">
shopping_cart
</span>
<div class="cart">
<h2 class="cart-title">Your Shopping Cart</h2>
<div class="cart-content">
<div class="cart-box">
<img src="/Monn-Homme/images/tie1.jpg" class="cart-image">
<div class="detail-box">
<div class="cart-product-title">
Tie
</div>
<div class="cart-price"> £10.99</div>
<input type="number" value="1" class="cart-qty">
</div>
<span class="material-symbols-outlined" id="cart-remove">
delete
</span>
</div>
</div>
<div class="total">
<div class="total-title">Total</div>
<div class="total-price">£10.99</div>
</div>
<button type="button" class="buy-btn">Buy Now</button>
<span class="material-symbols-outlined" id="close-cart">
close
</span>
</div>
</div>

Random math game in JavaScript

I'm trying to make a math game in JS like this:
Easy level: This level contains 5 questions contains three digits for example 1 + 2;
2 marks are calculated for each question. If the student gets a 7, he is congratulated by a moving animation and music of success, and if he does not get a passing mark, the sound of loss is heard.
and I want to show what's the score he got from correct answers.
like this sample output:
you lose and got 0/5, something like that.
I already do that and I did not get the output as I want, I think I have errors in the if statement.
This is my HTML code
<section>
<h1>Math Addition Quiz Game</h1>
<div class="centerdiv">
<div class="insertBox">
<div class="box1">
<p id="v1"> </p>
<p class="text-center justify-content-center" id="final"></p>
<p class="text-center justify-content-center" id="final1"></p>
</div>
<div class="box1">
<p id="operator">+</p>
</div>
<div class="box1">
<p type="text" id="v2"></p>
</div>
</div>
<div class="middleBox">
<input type="text" id="answ">
</div>
<div class="sentBox">
<button onclick="jsGame()" class="mb-3" id="submit"> Check Answer</button> <br>
<button onclick="Restart()" class="mb-3"id="restart" > Restart </button>
<button onclick="Main()" id="Main"> Back To Main Menu</button>
</div>
</div>
</section>
This is Java Script Code
let n1 = Math.floor(Math.random()*10+1)
let n2 = Math.floor(Math.random() * 10 + 1)
document.getElementById('v1').innerHTML = n1;
document.getElementById('v2').innerHTML = n2;
var count = 0;
var wrong = 0;
var score = 0;
document.getElementById('v1').value = n1;
document.getElementById('v2').value = n2;
document.getElementById('restart').style.visibility = "hidden";
document.getElementById('Main').style.visibility = "hidden";
let ans = n1 + n2;
const jsGame = () => {
var usera = document.getElementById('answ').value;
if (usera == ans) {
audio.play();
wrong = 0; //wrong answers
score++;
count++; //correct answers
GenerateRandom();
}
else {
//sad.play();
wrong = wrong+1;
document.getElementById('answ').value = " ";
alert(`Correct Answer is ${ans} Try Again. `);
}
if (score == 5) {
level.play();
Visible();
var s = 10 - wrong;
if (s >= 5) {
level.play();
document.getElementById("final").innerHTML = `you win and got ${s}/10`
document.getElementsById('submit').style.visibility = "hidden";
document.getElementById('operator').style.visibility = "hidden";
}else{
sad.play();
document.getElementById('answ').value = " ";
document.getElementById("final").innerHTML = `you lose and got ${wrong}/10`
}
}
};
function GenerateRandom() {
document.getElementById('answ').value = " ";
n1 = Math.floor(Math.random() * 10 + 1)
n2 = Math.floor(Math.random() * 10 + 1)
document.getElementById('v1').innerHTML = n1;
document.getElementById('v2').innerHTML = n2;
document.getElementById('v1').value = n1;
document.getElementById('v2').value = n2;
ans = n1 + n2;
}
function Restart() {
window. location. reload();
}
function Main() {
location.href="./game.html";
}
var audio = new Audio('../Congratulations-sound.mp3');
var sad = new Audio('../sad.wav');
var level = new Audio('../level.wav')
function Visible() {
document.getElementById('v1').style.visibility = "hidden";
document.getElementById('v2').style.visibility = "hidden";
document.getElementById('answ').style.visibility = "hidden";
document.getElementById('submit').style.visibility = "hidden";
document.getElementById('operator').style.visibility = "hidden";
document.getElementById('restart').style.visibility = "visible";
document.getElementById('Main').style.visibility = "visible";
}
I hope you can help me, and any modification or better addition to the code please help me. Thank you.
This is a Demo of what I did.
demo in github
repo in Github of all codes

How to properly use variables and Math.round

So i have this javascript that updates a paragraph, but it only outputs NaN. When i check the var coins it outputs ? before i click the button, i and if i push the button in the HTML it adds 0.01 every time i click it, and then my output ends up like this ?0.010.010.010.01.01... Any idea why this happens?
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval(update, 10);
function update() {
var coinsFix = Number(Math.round(coins + 'e2') + 'e-2');
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>
</div>

You could use Number.toFixed with two digits. The result is a string.
The toFixed() method formats a number using fixed-point notation.
var coinsFix = coins.toFixed(2);
// ^^^^^^^^^^^
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval(update, 10);
function update() {
var coinsFix = coins.toFixed(2);
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>
</div>

Change
setInterval(update, 10);
to
setInterval("update()", 10);
also
var coinsFix = Number(Math.round(coins + 'e2') + 'e-2');
to
var coinsFix = coins.toFixed(2);
Try this:
var Cpc = 0.01; //Coins per Click
var coins = 0; //Coins
var cps = 0; //Coins per Sec
setInterval("update()", 10);
function update() {
var coinsFix = coins.toFixed(2);
document.getElementById('Coins').innerHTML = coinsFix + ' $';
document.getElementById('CoinsB').innerHTML = coinsFix;
document.getElementById('Cps').innerHTML = cps + ' Cps';
}
function CPC() {
function cpc() {
var addCoins = coins + Cpc;
return addCoins;
}
coins = cpc();
}
<div class="rightBox">
<div id="ClickSpot">
<button id="clickButton" onClick="CPC()"> <img src="ClickerCoin.png" alt="ClickerSpot" class="ClickerSpot"> </button>
</div>
</div>
<div class="bottomBox">
<p id="Coins">Coins</p>
<div id="CoinsB" style="display: none"></div>
<p id="Cps">Cps</p>enter code here
</div>

Multiple progress bars visualy update only one

i'm working on my JavaScript skills and this is my first program trial here.
Everything was going quite well for me, but i'm stuck on this problem for about 3 days now and i guess there is something i don't get over here.
Well, diving in - i have 2 separate "Training Fields" - each has it's own "Train" button (onclick function) , "Level up" button (onclick function) and progress bar.
The problem is that the higher "Training Field" will progress the lower progress bar and not it's own.
Help will be appreciated! thx
//ignore this line, it's for me for testing
document.getElementById('hideMe').style.visibility = 'hidden';
/*========================================
Javascript for first set
========================================*/
var bodyTotal = 0;
var totalBodyCost = 0;
var bodyCost = 100;
var amountLoaded = 1;
function buyBody(){
bodyCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
if(amountLoaded >= bodyCost){
totalBodyCost += bodyCost;
bodyTotal = bodyTotal + 1;
document.getElementById('bodyTotal').innerHTML = bodyTotal;
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalBodyCost + Math.floor(100 * Math.pow(1.1,bodyTotal));
document.getElementById('bodyCost').innerHTML = nextCost;
document.getElementById("bodyProgressBar").max = nextCost;
bodyCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('bodyProgressBar');
var status = document.getElementById('bodyStatus');
status.innerHTML = al+"/" +bodyCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainBody(){
progressBarSim(amountLoaded);
if(amountLoaded < bodyCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('bodyFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
/*========================================
Javascript for second set
========================================*/
var mindTotal = 0;
var totalMindCost = 0;
var mindCost = 100;
var amountLoaded = 1;
function buyMind(){
mindCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
if(amountLoaded >= mindCost){
totalMindCost += mindCost;
mindTotal = mindTotal + 1;
document.getElementById('mindTotal').innerHTML = mindTotal;
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'hidden';
amountLoaded = 0;
};
var nextCost = totalMindCost + Math.floor(100 * Math.pow(1.1,mindTotal));
document.getElementById('mindCost').innerHTML = nextCost;
document.getElementById("mindProgressBar").max = nextCost;
mindCost = nextCost;
progressBarSim(amountLoaded);
};
function progressBarSim(al) {
var bar = document.getElementById('mindProgressBar');
var status = document.getElementById('mindStatus');
status.innerHTML = al+"/" +mindCost;
bar.value = al;
al++;
var sim = "progressBarSim("+al+")";
}
function trainMind(){
progressBarSim(amountLoaded);
if(amountLoaded < mindCost){
amountLoaded++;
}else{
var finalMessage = document.getElementById('mindFinalMessage').style.visibility = 'visible';
finalMessage.innerHTML = "";
}
};
/*=============================================*/
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface.css" />
</head>
<body>
<div style="float:right">
Body Level: <span id="bodyTotal">0</span>
<button onclick="trainBody()">Train Body</button><br>
<progress id="bodyProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="bodyStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="bodyFinalMessage" style="float:left; visibility:hidden" onclick="buyBody()">Body Level Up</button>
<br><br>
Mind Level: <span id="mindTotal">0</span>
<button onclick="trainMind()">Train Mind</button><br>
<progress id="mindProgressBar" value="0" max="100" style="width:200px; float:left;"></progress>
<span id="mindStatus" style="float:left; z-index:555; margin-left:-110px;">0/100</span>
<button id="mindFinalMessage" style="float:left; visibility:hidden" onclick="buyMind()">Mind Level Up</button>
</div>
<div id="hideMe" style="position:absolute; top:400; left:400">
Body Cost: <span id="bodyCost">100</span><br>
Mind Cost: <span id="mindCost">100</span>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

You are reassigning variables and functions using the exact same names amountLoaded, progressBarSim(al).
Because body and mind behavior are very similar you could use a module pattern (http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html) to use the same variable and function names within their own scopes.
<button onclick="Body.onClick()">Body</button>
<button onclick="Mind.onClick()">Mind</button>
And in your script file
var Body = (function() {
var me = {};
me.onClick = function() {
console.log("body click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
var Mind = (function() {
var me = {};
me.onClick = function() {
console.log("mind click");
progressBar(al);
};
function progressBar(al) {
}
return me;
})();
The gotcha here is you can't use body with the inline onclick since that already refers to the body element.

JavaScript Not Triggering

So I've got the beginnings of an animation script here:
<div id="card5">
<h4 class="y">Let me be your guide.</h4>
<h1>Here's what I've got:</h1>
<div id="a">
<h4 id="aa">Creativity</h4>
</div>
<div id="b">
<h4 id="bb">Know-how</h4>
</div>
<div id="c">
<h4 id="cc">Familiarity</h4>
</div>
</div>
<script type="text/javascript">
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
var cc = document.getElementById("cc");
var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementsByTagName("c");
var aadown = true;
var bbdown = true;
var ccdown = true;
a.onmouseover = amove;
b.onmouseover = bmove;
c.onmouseover = cmove;
function amove() {
window.alert("Herro!");
if (aadown) {
aaup();
aadown = false;
}
}
function aaup() {
if (aamargin > 0) {
aamargin -= 1;
style.aa.marginTop = aamargin + "%";
requestAnimationFrame(aaup);
}
}
</script>
And when I mouse over the first div ("a"), of course, nothing happens. I put an alert box in to see if the amove() function was being triggered, and it wasn't. The alert never fired. No idea why. It's probably just a typo somewhere...

the error is here:
var aamargin = style.aa.marginTop | 30;
var bbmargin = style.bb.marginTop | 30;
var ccmargin = style.cc.marginTop | 30;
I think you mean aa.style instead of style.aa?

Two errors with style.aa.marginTop | 30;:
| is a bitwise operator, if you want logical OR, you need ||, like this: style.aa.marginTop || 30;
style is not defined, you need aa.style, like this: aa.style.marginTop || 30;
Last thing: bmove and cmove are not defined.
See the patched example here:
<div id="card5">
<h4 class="y">Let me be your guide.</h4>
<h1>Here's what I've got:</h1>
<div id="a">
<h4 id="aa">Creativity</h4>
</div>
<div id="b">
<h4 id="bb">Know-how</h4>
</div>
<div id="c">
<h4 id="cc">Familiarity</h4>
</div>
</div>
<script type="text/javascript">
var aa = document.getElementById("aa");
var bb = document.getElementById("bb");
var cc = document.getElementById("cc");
var aamargin = aa.style.marginTop || 30;
var bbmargin = bb.style.marginTop || 30;
var ccmargin = cc.style.marginTop || 30;
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementsByTagName("c");
var aadown = true;
var bbdown = true;
var ccdown = true;
bmove = cmove = amove; // just a quickfix
a.onmouseover = amove;
b.onmouseover = bmove;
c.onmouseover = cmove;
function amove() {
window.alert("Herro!");
if (aadown) {
aaup();
aadown = false;
}
}
function aaup() {
if (aamargin > 0) {
aamargin -= 1;
aa.style.marginTop = aamargin + "%";
requestAnimationFrame(aaup);
}
}
</script>