URGENT problem with javascript

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:

i linked it wrong, but i need help with it

Ok, so i need to have other functional 0 here, but i dnt know how to put it here…
how can i do this?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.