vendredi 15 mai 2020

Update checkbox status when changing element value

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