How can I store information on after I press a button?-CodePudding

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 >
            <span >-18%</span>
            <div >
                <img src="OnyCostopProSpray 36.90.png" alt="">
                <div >
                    <a href="#" ></a>
                    <a href="#" >add to cart</a>
                    <a href="#" ></a>
                </div>
            </div>
            <div >
                <h3>Costop Pro Spray</h3>
                <div > 26.90€ <span>31.74€</span> </div>
            </div>
        </div>

Thanks to anyone who can help!

CodePudding user response：

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 >
            <span >-18%</span>
            <div >
                <img src="OnyCostopProSpray 36.90.png" alt="">
                <div >
                    <a href="#" ></a>
                    <button  onclick="updateCart(10,12)">add to cart</button>
                    <a href="#" ></a>
                </div>
            </div>
            <div >
                <h3>Costop Pro Spray</h3>
                <div  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>

CodePudding user response：

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 >
  <span >-18%</span>
  <div >
    <img src="OnyCostopProSpray 36.90.png" alt="">
    <div >
      <a href="#" ></a>
      <a href="#" >add to cart</a>
      <a href="#" ></a>
    </div>
  </div>
  <div >
    <h3>Costop Pro Spray</h3>
    <div > 26.90€ <span>31.74€</span> </div>
  </div>
  <button type='submit'>Add to basket</button>
</div>