why i can not print the 0 on the button? is only printing at the first product
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loja</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<header id="barra">
<div>
<h1>Shopping SESISENAI</h1>
<div id="centro">
<img src="boti.jpg" alt="carrinho" id="carrinho">
</div>
<p id="frase">
Confira seus produtos e finalize sua compra!
</p>
</div>
</header>
<div id="grade">
<div>
<aside class="o-aside">
Produtos
<br>
<img src="deleite.png" alt="deleite" id="deleite">
<br>
<p>---------------------------------</p>
<img src="nuvem.jpg" alt="nuvem" id="nuvem">
<br>
<p>---------------------------------</p>
<img src="bot.webp" alt="morango" id="morango">
</aside>
</div>
<div>
<main class="o-main">
Quantidade
<br>
<div ="container">
<br>
<button onclick="increment()">+</button>
<h2 id="counting"></h2>
<button onclick="decrement()"><img src="lixo.png" id="lixo"></button>
</div>
<script>
var data = 0;
var aqsw = 0;
var vr = 0;
var crt = 0;
document.getElementById("counting").innerText = data;
document.getElementById("asd").innerText= aqsw;
document.getElementById("awq").innerText = crt;
document.getElementById("azx").innerText = vr;
function increment() {
data = data + 1;
document.getElementById("counting").innerText = data;
document.getElementById("asd").innerText= aqsw;
document.getElementById("awq").innerText = crt;
document.getElementById("azx").innerText = vr;
}
function decrement() {
data = 0;
document.getElementById("counting").innerText = data;
document.getElementById("asd").innerText= aqsw;
document.getElementById("awq").innerText = crt;
document.getElementById("azx").innerText = vr;
}
</script>
<div ="conta">
<p></p>
<br>
<button onclick="increment()">+</button>
<h2 id="counting"></h2>
<button onclick="decrement()"><img src="lixo.png" id="lixo"></button>
</div>
<p></p>
<div ="cont">
<br>
<button onclick="increment()">+</button>
<h2 id="counting"></h2>
<button onclick="decrement()"><img src="lixo.png" id="lixo"></button>
</div>
</div>
</body>
</html>
css:
#barra {
background-color: rgba(79,164,135,255);
}
h1 {
text-align: center;
color: #ffffff;
}
#frase {
text-align: center;
color: white;
}
#carrinho {
width: 100px;
}
#centro {
text-align: center;
}
#deleite {
width: 250px;
}
#grade {
display: grid;
grid-gap: 1rem;
grid-template-areas:
"header header header"
"aside main main"
"footer footer footer";
grid-template-columns: auto auto auto;
grid-template-rows: auto 100vh auto;
}
.o-header {
grid-area: header;
}
.o-aside {
grid-area: aside;
}
.o-main {
grid-area: main;
}
.o-header, .o-aside, .o-main, .o-footer {
background: #ffffff;
color: #000000;
}
#deleite {
width: 200px;
}
#lixo {
width: 20px;
height: 30px;
}
#nuvem {
width: 200px;
}
#morango {
width: 200px;
}
#frase:hover {
background-color: #000000;
transition: 0.5s;
opacity: 0.7;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Basic JavaScript - Comment Your JavaScript Code
Link to the challenge:
