I'm a beginner in web development and I am working on a webpage where I have some book products you can buy.
Each book has a quantity between 1-5 which means you can get 1-5 copies of a book.
If I go on a product and select an amount I want the product's checkbox to be checked automatically.
However with my code when I change a product amount every checkbox in the page is checked.
My code :
function updatetotal() {
var quantities = document.getElementsByClassName("amn");
var sum = 0;
var floatprice = parseFloat("9.99");
var sm = document.getElementById("thesum");
var boxes = document.getElementsByClassName("bought");
for (var i = 0; i < 6; i++) {
if (quantities[i].value != null) { //this is were all boxes in the page are checked and I want only the boxes with amounts not null to be checked
boxes[i].checked = true;
}
sum += quantities[i].value * floatprice;
}
sm.innerHTML = sum.toString(); //put the sum next to the cart
}
<!-- a shopping cart which displays my product sum -->
<img src="IMAGES/shopcart.png" id="cart" alt=c art/> = <span id="thesum"> </span> (price of selected products) <!-- I have a total of six books -->
<div id="p-float">
<div class="p-float"><div class="p-float-in">
<center><img class="p-img" src="IMAGES\subtle.jpg" alt = subtle_art/ ><br/>
<div class="p-name">Subtle Art of not giving an F</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" 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\everything.jpg" alt = every/ ><br/>
<div class="p-name">Everything is <br/> F</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" onchange = "updatetotal()" class = "amn" name = "num" value = "amount" min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" 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\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" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" 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" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" 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\habits.jpg" alt = hbts/ ><br/>
<div class="p-name">7 Habits of highly effective people</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class = "amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" 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\anything.jpg" alt = any/ ><br/>
<div class="p-name">Achieve anything in 1 year</div>
<div class="p-price">$9.99</div>
<div class = "amount"> Amount:<input type = "number" class="amn" onchange = "updatetotal()" name = "num" value = "amount " min = "1" max = "5"/> </div><br/>
<div class = "buyme"> <input type = "checkbox" class = "bought" name = "box" value = "buy me"/> Buy Me </div></center>
</div></div>
</div>
Aucun commentaire:
Enregistrer un commentaire