Increment number of items in a basket - Javascript

Question

Increment number of items in a basket - Javascript

Asked 5 years, 8 months ago

Viewed 69 times

2

Hello, I’m mounting a basket of items, it’s quite simple, when I add an item the basket number should be incremented i++ and the value of the basket should go from 0 to 1, this happens with only one item if it receives the click event it increments in the basket +1, but if I click on the second item it decreases the number of items in the basket and if I click again it increments. What I want is that each item when receiving event click it increments in the basket +1 and that when I take out of the basket it takes the one that received the event click.

var btnAdd = document.querySelectorAll(".btnAdd");
var nItens = document.querySelector(".numeroItens");
nItens.textContent = 0;
var numItens = nItens.textContent;
click = 1;

btnAdd.forEach(function(botao) {
  botao.addEventListener("click", function() {
    if (click == 1) {
      numItens++;
      nItens.textContent = numItens;
      var produto = this.parentElement;
      console.log(produto);

      produto.style.opacity = ".3";
      click = 0;
    } else {
      numItens--;
      nItens.textContent = numItens;
      var produto = this.parentElement;
      produto.style.opacity = "1";
      click = 1;

    }
  })

})

html,
body {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header {
  background: #F8CB00;
  height: 150px;
  position: relative;
  padding: 10px 10%;
}

.logo {
  position: relative;
  color: #fff;
  font-weight: 800;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 22px;
}

.detalhes {
  margin-left: 150px;
}

.acesso {
  width: max-content;
  /* position: relative; */
  /* display: block; */
  float: right;
}

.btnEntrar {
  text-decoration: none;
  color: #fff;
}

.btnCriar {
  padding: 7px;
  border-radius: 5px;
  color: #F8CB00;
  text-decoration: none;
  background: #fff;
  margin-left: 10px;
}


/* Buscar */

.buscar {
  top: 70px;
  position: relative;
  float: right;
  height: 50px;
  padding: 0;
}

.buscar>* {
  display: inline-block;
}

.campoBuscar input::placeholder {
  font-style: italic;
  font-size: 15px;
}

.campoBuscar input {
  padding: 5px;
  border: none;
  border-radius: 5px;
  height: 39px;
  padding-left: 40px;
  width: 600px;
}

.fa-search {
  position: absolute;
  padding: 10px;
  color: #979797;
}

.buscar button {
  padding: 10px;
  background: #6364D8;
  border: none;
  border-radius: 5px;
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.buscar button>i {
  padding-right: 5px;
}

.buscar button>span {
  padding: 10px;
  box-sizing: border-box;
  right: -10px;
  position: relative;
  background: #393AB1;
}

.menu {
  position: absolute;
  width: 25%;
  height: 500px;
  background: #fff;
  top: 110px;
  border-radius: 5px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}

.btnAdd {
  position: absolute;
  top: -10px;
  right: -20px;
  border-radius: 50px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  border: none;
  color: #fff;
  background: #F8CB00;
}

.main {
  width: 100%;
  position: relative;
  float: right;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.boxProduto {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 150px;
  height: 250px;
  border-radius: 5px;
  /* overflow: hidden; */
  margin: 20px 10px;
  cursor: pointer;
  transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
  opacity: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}

.boxProduto:hover {
  transform: translateY(-5px);
  cursor: pointer;
}

.boxProduto img {
  position: relative;
  width: 130px;
  left: 50%;
  transform: translateX(-50%);
}

.topico {
  position: absolute;
  background: #fff;
  padding: 10px;
  width: 100%;
  height: 80px;
  box-sizing: border-box;
  bottom: 0;
  text-align: center;
  border-radius: 0 0 5px 5px;
}

.boxProduto .minTitulo {
  margin-top: 5px;
  font-weight: 100;
  color: #001b48;
}

.minPreco {
  font-weight: 800;
  color: #F8CB00;
  margin-top: 5px;
}

.minDesc {
  opacity: 0;
}

.close {
  position: absolute;
  width: 50px;
  height: 40px;
  z-index: 99;
  padding: 5px 10px;
  box-sizing: border-box;
  background: #f0f0f0;
}

.close:hover {
  cursor: pointer;
}

.conteudo {
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  z-index: -98;
  position: fixed;
  width: 60%;
  height: 80vh;
  background: #eef2ff;
  border-radius: 5px;
  box-shadow: 0px 0px 100px 500px rgba(0, 0, 0, .3);
  overflow: hidden;
  opacity: 0;
  transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: .2s;
}

.slide {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 55%;
  height: 100%;
  background: #fff;
}

.caixaConteudo {
  float: right;
  padding: 30px;
  box-sizing: border-box;
  height: 100%;
  width: 45%;
  position: relative;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

.caixaConteudo .classificacao {
  position: relative;
  border-left: 2px #018abe solid;
  width: max-content;
  padding: 0 10px;
}

.caixaConteudo .classificacao .tit {
  text-transform: uppercase;
  color: #03475a;
  letter-spacing: 2px;
  font-weight: 500;
}

.caixaConteudo .classificacao .cores {
  color: #03475a;
  font-weight: 100;
  font-size: 12px;
  letter-spacing: 3px;
}

.preco {
  letter-spacing: 3px;
  font-size: 28px;
  margin: 20px 0;
  font-weight: 100;
  /* opacity: 0; */
  color: #001b48;
  transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.titulo {
  position: relative;
  height: auto;
  letter-spacing: 5px;
  font-size: 28px;
  line-height: 20px;
  font-weight: 100;
}

.anime::after {
  content: '';
  top: 0;
  position: absolute;
  width: 0%;
  height: 100%;
  background: #eef2ff;
  animation: nome 1s;
  animation-delay: 0s;
}

@keyframes nome {
  0% {
    width: 100%;
    left: 0%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

.descricao {
  position: relative;
  margin-top: 20px;
  left: -5%;
  opacity: 0;
  transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: .8s;
}

.Tdesc {
  display: block;
  letter-spacing: 7px;
  margin-bottom: 20px;
}

.Txdesc {
  font-size: 12px;
}

.btnComprar {
  padding: 15px 40px;
  border: none;
  background: #02457a;
  color: #fff;
  border-radius: 50px;
  text-transform: uppercase;
  margin-top: 50px;
  left: -5%;
  transition: all .5s;
  transition-delay: .7s;
  position: relative;
  opacity: 0;
}

.quant {
  display: inline-block;
  margin-left: 80px;
  font-size: 22px;
  font-weight: 200;
}

.quant #menos,
.quant #mais {
  position: relative;
  bottom: 2px;
  font-size: 15px;
  font-weight: 100;
  color: #969696;
  padding: 0 5px;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
  <title>Loja - Adidas</title>
</head>

<body>
  <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Cesta<span class="numeroItens"></span></button>
  <div class="main">
    <div class="boxProduto">
      <img id="imgVitrine" src="img/arroz02.png">
      <div class="topico">
        <div class="minTitulo">Arroz Urbano</div>
        <div class="minPreco">R$ 2.54</div>
        <div class="minDesc"></div>
      </div>
      <button class="btnAdd">+</button>
    </div>
    <div class="boxProduto">
      <img id="imgVitrine" src="img/arroz2.png">
      <div class="topico">
        <div class="minTitulo">Arroz Qualitá</div>
        <div class="minPreco">R$ 2.74</div>
        <div class="minDesc"></div>
      </div>
      <button class="btnAdd">+</button>
    </div>
  </div>

</body>

</html>

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by user140583 • 56 points · Answer 1 · 2019-02-27T01:03:54+00:00

From what you can see, both events are using the same flag - the variable click, to check if a product has already been clicked.

When clicking on the first product, the click variable is set to 0. So when the second product is clicked, as its click variable is still 0, and your code considers that you are deselecting a product.

To keep track of which product has already been selected, you can pass a new attribute to them, or add them to a list, or create a hidden input. In the example I use the attribute clicked. Note that I can use it even before starting it - an unstarted attribute returns undefined, that works in a similar way to a false.

var btnAdd = document.querySelectorAll(".btnAdd");
var nItens = document.querySelector(".numeroItens");
nItens.textContent = 0;
var numItens = nItens.textContent;

btnAdd.forEach(function(botao){
    botao.addEventListener("click", function(){
        if(!this.clicked){
            numItens++;
            nItens.textContent = numItens;
            var produto = this.parentElement;
            console.log(produto);
            
            produto.style.opacity = ".3";
            this.clicked = true;
        }
        else{
            numItens--;
            nItens.textContent = numItens;
            var produto = this.parentElement;
            produto.style.opacity = "1";
            this.clicked = false;

        }
    })

})

html,body{
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.header{
    background: #F8CB00; 
    height: 150px;
    position: relative;
    padding: 10px 10%;
}
.logo{
    position: relative;
    color: #fff;
    font-weight: 800;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 22px;
}
.detalhes{
    margin-left: 150px;
}
.acesso{
    width: max-content;
    /* position: relative; */
    /* display: block; */
    float: right;
}
.btnEntrar{
    text-decoration: none;
    color: #fff;
    
}
.btnCriar{
    padding: 7px;
    border-radius: 5px;
    color: #F8CB00;
    text-decoration: none;
    background: #fff;
    margin-left:10px;
}
/* Buscar */
.buscar{
    top: 70px;
    position: relative;
    float: right;
    height: 50px;
    padding: 0;
}
.buscar > *{
    display: inline-block;
}
.campoBuscar input::placeholder{
    font-style: italic;
    font-size: 15px;
}
.campoBuscar input{
    padding: 5px;
    border: none;
    border-radius: 5px;
    height: 39px;
    padding-left: 40px;
    width: 600px;
}
.fa-search{
    position: absolute;
    padding: 10px;
    color: #979797;
}
.buscar button{
    padding: 10px;
    background: #6364D8;
    border: none;
    border-radius: 5px;
    color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
}
.buscar button > i{
    padding-right: 5px;
}
.buscar button > span{
    padding: 10px;
    box-sizing: border-box;
    right: -10px;
    position: relative;
    background: #393AB1;
    
}
.menu{
    position: absolute;
    width: 25%;
    height: 500px;
    background: #fff;
    top: 110px;
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}
.btnAdd{
    position: absolute;
    top: -10px;
    right: -20px;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    border: none;
    color: #fff;
    background: #F8CB00;
}
















.main{
    width: 100%;
    
    position: relative;
    float: right;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
}

.boxProduto{    
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 150px;
    height: 250px;
    border-radius: 5px;
    /* overflow: hidden; */
    margin: 20px 10px;
    cursor: pointer;
    transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.boxProduto:hover{
    transform: translateY(-5px);
    cursor: pointer;
}
.boxProduto img{
    position: relative;
    width: 130px;
    left: 50%;
    transform: translateX(-50%);
}
.topico{
    position: absolute;
    background: #fff;
    padding:10px;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    bottom: 0;
    text-align: center;
    border-radius:  0 0 5px 5px;
}
.boxProduto .minTitulo{
    margin-top: 5px;
    font-weight: 100;
    color: #001b48;

}
.minPreco{
    font-weight: 800;
    color: #F8CB00;
    margin-top: 5px;
}
.minDesc{
    opacity: 0;
}
.close{
    position: absolute;
    width: 50px;
    height: 40px;
    z-index: 99;
    padding: 5px 10px;
    box-sizing: border-box;
    background: #f0f0f0;
}
.close:hover{
    cursor: pointer;
}

.conteudo{
    top: 50%;
    left: 45%;
    transform: translate(-50%,-50%);
    z-index: -98;
    position: fixed;
    width: 60%;
    height: 80vh;
    background: #eef2ff;
    border-radius: 5px;
    box-shadow: 0px 0px 100px 500px rgba(0, 0, 0, .3);
    overflow: hidden;
    opacity: 0;
    transition: all .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .2s;
}
.slide{
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 55%;
    height: 100%;
    background: #fff;
    
}

.caixaConteudo{
    float: right;
    padding: 30px;
    box-sizing: border-box;
    height: 100%;
    width:45%;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.caixaConteudo .classificacao{
    position: relative;
    border-left:2px #018abe solid;
    width: max-content;
    padding: 0 10px;
}
.caixaConteudo .classificacao .tit{
    text-transform: uppercase;
    color: #03475a;
    letter-spacing: 2px;
    font-weight: 500;
}
.caixaConteudo .classificacao .cores{
    color: #03475a;
    font-weight: 100;
    font-size: 12px;
    letter-spacing: 3px;
}
.preco {
    letter-spacing: 3px;
    font-size: 28px;
    margin: 20px 0;
    font-weight: 100;
    /* opacity: 0; */
    color: #001b48;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.titulo{
    position: relative;
    height: auto;
    letter-spacing: 5px;
    font-size: 28px;
    line-height: 20px;
    font-weight: 100;
}
.anime::after{
    content: '';
    top: 0;
    position: absolute;
    width: 0%;
    height: 100%;
    background: #eef2ff;
    animation: nome 1s;
    animation-delay: 0s;    
}
@keyframes nome{
    0%{
        width: 100%;
        left: 0%;
    }
    100%{
        left: 100%;
        width: 0%;
    }
}
.descricao{
    position: relative;
    margin-top: 20px;
    left: -5%;
    opacity: 0;
    transition: all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition-delay: .8s;
}
.Tdesc{
    display: block;
    letter-spacing: 7px;
    margin-bottom: 20px;
}
.Txdesc{
    font-size: 12px;
}
.btnComprar{
    padding: 15px 40px;
    border: none;
    background: #02457a;
    color: #fff;
    border-radius: 50px;
    text-transform: uppercase;
    margin-top: 50px;
    left: -5%;
    transition: all .5s;
    transition-delay: .7s;
    position: relative;
    opacity: 0;
}
.quant{
    display: inline-block;
    margin-left: 80px;
    font-size: 22px;
    font-weight: 200;
}
.quant #menos, .quant #mais{
    position: relative;
    bottom: 2px;
    font-size: 15px;
    font-weight: 100;
    color: #969696;
    padding: 0 5px;
    cursor: pointer;
}

<!DOCTYPE html>
<html >
    <head>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <title>Loja - Adidas</title>
</head>
<body>
    <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>Cesta<span class="numeroItens"></span></button>
    <div class="main">
        <div class="boxProduto">
            <img id="imgVitrine" src="img/arroz02.png">
            <div class="topico">
                <div class="minTitulo">Arroz Urbano</div>
                <div class="minPreco">R$ 2.54</div>
                <div class="minDesc"></div>
            </div>
            <button class="btnAdd">+</button>
        </div>
        <div class="boxProduto">
            <img id="imgVitrine" src="img/arroz2.png">
            <div class="topico">
                <div class="minTitulo">Arroz Qualitá</div>
                <div class="minPreco">R$ 2.74</div>
                <div class="minDesc"></div>
            </div>
            <button class="btnAdd">+</button>
        </div>        
    </div>
        
</body>

</html>