How can i change a number on html by one?-CodePudding

So I want to make an “add to cart” button. I've already made the button, and it works fine. Now, I want to make it so if you press the plus button that appears, the number on the screen will change by one and if you press the minus, the number will change by -one. Also, I want to make that if the number is equal to 0 then go back to the initial button. Here's the code that I have used by far.

const cartButtons = document.querySelectorAll('.cart-button');

cartButtons.forEach(button => {
    button.addEventListener('click', cartClick);
});

function cartClick() {
    let button = this;
    button.classList.add('clicked');
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    place-items: center;
    background-color: #151515;
  }
  
  .cart-button {
    position: relative;
    padding: 10px;
    width: 200px;
    height: 60px;
    border: 0;
    outline: none;
    border-radius: 10px;
    background-color: #1b6eee;
    cursor: pointer;
    color: #fff;
    transition: 0.3s ease-in-out;
    overflow: hidden;
    top: 300px;
    left: 300px;
  }
  
  .cart-button span {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    color: #fff;
  }
  
  .cart-button span.add-to-cart {
    opacity: 1;
  }
  
  .cart-button span.added {
    opacity: 0;
  }
  
  .cart-button .cart-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -10%;
    transform: translate(-50%, -50%);
    font-size: 2em;
  }
  
  .cart-button .cart-item {
    position: absolute;
    z-index: 3;
    top: -20%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
  }
  
  h3 {
    display: inline;
    color: #fff;
    font-size: 2em;

}

  .more, .less {
    padding: 10px;
    width: 60px;
    height: 60px;
    border: 0;
    outline: none;
    border-radius: 10px;
    background-color: #1b6eee;
    cursor: pointer;
    color: #fff;

}

div {
  position: absolute;
  top: 300px;
  left: 300px;
  opacity: 0;

}
.more {margin-left: 28px;}

.less {margin-right: 28px;}





/*=====animations=====*/



  .cart-button.clicked .cart-icon {
    animation: cart 3s ease-in-out forwards;
  }
  
  .cart-button.clicked .cart-item {
    animation: box 3s ease-in-out forwards;
  }
  
  .cart-button.clicked span.add-to-cart {
    animation: add 3s ease-in-out forwards;
  }
  
  .cart-button.clicked span.added {
    animation: added 3s ease-in-out forwards;
  }
  .cart-button.clicked {
    animation: but 3s ease-in-out forwards;
  }
  .cart-button.clicked ~ div {
    animation: ml 3s ease-in-out forwards;
  }

  @keyframes cart {
    0% {
      left: -10%;
    }
    20%, 30% {
      left: 50%;
    }
    50%, 100% {
      left: 110%;
    }
  }
  
  @keyframes box {
    0%, 20% {
      top: -20%;
    }
    30% {
      top: 40%;
      left: 52%;
    }
    50%, 100%{
      top: 40%;
      left: 112%;
    }
  }
  
  @keyframes add {
    0% {
      opacity: 1;
    }
    10%, 100% {
      opacity: 0;
    }
  }
  
  @keyframes added {
    0%, 40% {
      opacity: 0;
    }
    50%, 100% {
      opacity: 1;
    }
  }

  @keyframes but {
    0%, 80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes ml {
    0%, 80% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/4fc032096b.js" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<button >
      <span >Add To Cart</span>
      <span >Added</span>
      <i ></i>
      <i ></i>
      
  </button>

    
    <div>
        <button  onclick="minus()">-</button>
        <h3 >1</h3>
        <button  onclick="plus()"> </button>
    </div>

Sorry for putting everything, but I hope it helped and if you can help me too I would appreciate it very much!!!

CodePudding user response：

const cartDisplay = document.querySelector(".number");
const cartButtons = document.querySelectorAll('.cart-button');
var cartNumber = 1;
cartDisplay.textContent = cartNumber;

cartButtons.forEach(button => {
    button.addEventListener('click', cartClick);
});
function cartClick() {
    let button = this;
    button.classList.add('clicked');
}    
function cartUnclick(){
    cartButtons.forEach(button => 
    button.classList.remove('clicked'));
}
function plus(){
      cartNumber;
    cartDisplay.textContent = cartNumber;
}
function minus(){
    if (cartNumber == 1) return cartUnclick()
    --cartNumber;
    cartDisplay.textContent = cartNumber;
}

This will make it so that when the plus() function is called, the cartNumber variable will return a value of itself plus one and if the minus() function is called, the cartNumber will return a value of itself minus one. The textContent of the display can then be updated by assigning it to the value of cartNumber.

If the cartNumber is 1 when the minus() function is called, the cartUnclick function will be called and the class of "clicked" will be removed from the button. This will return the button back to its initial state. Thanks n have a nice day

CodePudding user response：

You have declared two onClick inline functions minus() and plus() but haven't call it. That's the error. Check the javascript and copy and paste it. I have tested it and working perfectly. Have a nice day... :) Also updated HTML a little bit.

<button >
    <span >Add To Cart</span>
    <span >Added</span>
    <i ></i>
    <i ></i>
</button>
<div >
    <button  onclick="minus()">-</button>
    <h3 >1</h3>
    <button  onclick="plus()"> </button>
</div>

const cartButtons = document.querySelectorAll('.cart-button');
cartButtons.forEach(button => {
    button.addEventListener('click', (event)=>{
        button.classList.add('clicked');
            document.querySelector('.number_wrapper').style.display = "block";
            setInterval(()=>{
                if(parseInt(number.innerHTML) == 0){
                    document.querySelector('.number_wrapper').style.display = "none";
                    button.classList.remove('clicked');
                    number.innerHTML = 1;
                }
            },0);
    });
});

let number = document.querySelector('.number');
function minus(){
    number.innerHTML = parseInt(number.innerHTML) -1;
}
function plus(){
    number.innerHTML = parseInt(number.innerHTML)  1;
}