mercredi 13 mai 2020

HTML JAVASCRIPT : add random values to product quantities and checkboxes

I'm a beginner in web development and I have made a website where I have a products page like this :

my product page

Now I have also made a simple button under these products . By clicking on that button using javascript you have to randomly check some of the "buy me" checkboxes of the page . If a box is checked you have to assign a random value between 1-5 to the amount(quantity) of the book whose box is checked . At last the sum of all these products has to be added to the orange cart I have above the books . I have written code about this task but my problem is how to iterate through each product and randomly check a box and put a number to the amount as when I press the button that activates this function nothing changes My code below (Let's say I have 2 products ):

  function randomfunc(){
   
    var c = document.getElementById("cart"); //get the cart
    var sum =0; //the sum of products that has to be displayed next to cart
        
        for(var i =0;i<6;i++)
        {
          var flag = Math.floor(Math.random()*0)+1; //random num between 1 and 0 
        var p = document.getElementsByClass("p-price");//get price

          var y=document.getElementsByClass("buyme").elements[i];//get the checkboxes
          var x=document.getElementsByClass("amount").elements[i].value;//get the amounts of each prod
          if(flag==0)
          {
            x=x.checked;//check the box
                  y= Math.floor(Math.random()*1)+5;//assign random num to amount
                
          }
          
          else if(flag==1){
             
                 x = !(x.checked); //uncheck the box if i have checked it before pressing the button 
            }
           
           sum+=y*p;
           
           
        }
        
     c.innerHTML= (sum + &euro;);
  
  
  
  
  }
 <img src = "IMAGES/shopcart.png"  id = "cart"alt = cart/> = "" (price of selected products)  
 
<div id="p-float">

 
 <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\work.jpg" alt = deepw/ ><br/>
            <div class="p-name">Deep </br>Work </div>
                    <div class="p-price">$9.99</div>
                        <div class = "amount"> Amount:<input type = "number" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" name = "box" value = "Buy me"/> Buy Me  </div></center>
     </div></div>



          <div class="p-float"><div class="p-float-in">
            <center><img class="p-img" src="IMAGES\giant.jpg" alt = gnt/ ><br/>
            <div class="p-name">Awaken the giant within</div>
                    <div class="p-price">$9.99</div>
                        <div class = "amount"> Amount:<input type = "number" name = "num"  value = "amount " min = "1" max = "5"/> </div><br/>
            <div class = "buyme">   <input type = "checkbox" name = "box" value = "Buy me"/> Buy Me  </div></center>
     </div></div> 



</div>

  <button class = "randbtn" onclick="randomfunc()"> Select random products </button> 

I would appreciate your help with guiding me to solve this issue (sorry about some book titles but I don't have another page ...)




Aucun commentaire:

Enregistrer un commentaire