I'm a beginner in web development and I have made a website where I have a products page like this :
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 + €);
}
<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