'How can I store information on after I press a button?

I have a problem that I don't know how can I add the information to a new page when I click a button. For example I have an add-to-cart button and when I press it I want to store some information. How can I do it? I want to be able to add some information on a click of a button but I don't know how to do it. For example the add to cart button is not working and I want to be able to click it and store information, How?

.products .box-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.products .box-container .box {
  flex: 1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  border-radius: .5rem;
  border: .1rem solid rgba(0, 0, 0, .1);
  position: relative;
}

.products .box-container .box .discount {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: .7rem 1rem;
  font-size: 2rem;
  color: var(--pink);
  background: rgba(255, 51, 153, .05);
  z-index: 1;
  border-radius: .5rem;
}

.products .box-container .box .image {
  position: relative;
  text-align: center;
  padding-top: 2rem;
  overflow: hidden;
}

.products .box-container .box .image img {
  height: 25rem;
}

.products .box-container .box:hover .image img {
  transform: scale(1.1);
}

.products .box-container .box .image .icons {
  position: absolute;
  bottom: -7rem;
  left: 0;
  right: 0;
  display: flex;
}

.products .box-container .box:hover .image .icons {
  bottom: 0;
}

.products .box-container .box .image .icons a {
  height: 5rem;
  line-height: 5rem;
  font-size: 2rem;
  width: 50%;
  background: var(--pink);
  color: #fff;
}

.products .box-container .box .image .icons .cart-btn {
  border-left: .1rem solid #fff7;
  border-right: .1rem solid #fff7;
  width: 100%;
}

.products .box-container .box .image .icons a:hover {
  background: #333;
}

.products .box-container .box .content {
  padding: 2rem;
  text-align: center;
}

.products .box-container .box .content h3 {
  font-size: 2.5rem;
  color: #333;
}

.products .box-container .box .content .price {
  font-size: 2.5rem;
  color: var(--pink);
  font-weight: bolder;
  padding-top: 1rem;
}

.products .box-container .box .content .price span {
  font-size: 1.5rem;
  color: #999;
  font-weight: lighter;
  text-decoration: line-through;
}

<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
</div>

Thanks to anyone who can help!

Solution 1:^[1]

you just need to replace anchor link with button and use js to update your cart price dynamically

.products .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.products .box-container .box{
    flex:1 1 30rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    border-radius: .5rem;
    border:.1rem solid rgba(0,0,0,.1);
    position: relative;
}

.products .box-container .box .discount{
    position: absolute;
    top:1rem; left:1rem;
    padding:.7rem 1rem;
    font-size: 2rem;
    color:var(--pink);
    background:rgba(255, 51, 153,.05);
    z-index: 1;
    border-radius: .5rem;
}

.products .box-container .box .image{
    position: relative;
    text-align: center;
    padding-top: 2rem;
    overflow:hidden;
}

.products .box-container .box .image img{
    height:25rem;
}

.products .box-container .box:hover .image img{
    transform: scale(1.1);
}

.products .box-container .box .image .icons{
    position: absolute;
    bottom:-7rem; left:0; right:0;
    display: flex;
}

.products .box-container .box:hover .image .icons{
    bottom:0;
}

.products .box-container .box .image .icons a{
    height: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    width:50%;
    background:var(--pink);
    color:#fff;
}

.products .box-container .box .image .icons .cart-btn{
    border-left: .1rem solid #fff7;
    border-right: .1rem solid #fff7;
    width:100%;
}

.products .box-container .box .image .icons a:hover{
    background:#333;
}

.products .box-container .box .content{
    padding:2rem;
    text-align: center;
}

.products .box-container .box .content h3{
    font-size: 2.5rem;
    color:#333;
}

.products .box-container .box .content .price{
    font-size: 2.5rem;
    color:var(--pink);
    font-weight: bolder;
    padding-top: 1rem;
}

.products .box-container .box .content .price span{
    font-size: 1.5rem;
    color:#999;
    font-weight: lighter;
    text-decoration: line-through;
}

<div class="box">
            <span class="discount">-18%</span>
            <div class="image">
                <img src="OnyCostopProSpray%2036.90.png" alt="">
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <button class="cart-btn" onclick="updateCart(10,12)">add to cart</button>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>Costop Pro Spray</h3>
                <div class="price" id='someId'> 0€ <span>0€</span> </div>
            </div>
        </div>

<script type="text/javascript">
    var price1 = 20;
    var price2 = 10;
    function updateCart(num1,num2){
       price1 += num1;
       price2 += num2;
       const el = document.getElementById('someId');
       el.innerHTML = `${price2}€ <span>${price1}€</span>`;
   }
   updateCart(0,0);
   </script>

Solution 2:^[2]

if you want to save info about order, then you need use DOM. For example you can save info in local storage. For it - write script inside eventListener

const box = document.querySelector('.box')
add.eventListener('submit', () => {
  // here your logic
})

<div class="box">
  <span class="discount">-18%</span>
  <div class="image">
    <img src="OnyCostopProSpray%2036.90.png" alt="">
    <div class="icons">
      <a href="#" class="fas fa-heart"></a>
      <a href="#" class="cart-btn">add to cart</a>
      <a href="#" class="fas fa-share"></a>
    </div>
  </div>
  <div class="content">
    <h3>Costop Pro Spray</h3>
    <div class="price"> 26.90€ <span>31.74€</span> </div>
  </div>
  <button type='submit'>Add to basket</button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Lee Taylor

'How can I store information on after I press a button?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]