JS - attach the same function to many html forms

Question

I am trying to create a web page similar to e-commerce (for practice), in which clicking on any of the buttons updates the basket value by the number (quantity) indicated on the input element. Until now, I could only update the basket from the first form, because when I try to assign a function in each form with a loop, the basket updates for the millisecond then return to zero. I guess it is due to volume. I know that there is an easier way to do this without manually assigning a function to eachdocument.forms[n]

Js

 window.onload = function() 
 {
    var getForm = document.forms[0];
    var numItems = 0;
    getForm.onsubmit = function(event) 
    {
      event.preventDefault();
      var getInput = getForm.elements["num-item"].value;
      if(parseInt(getInput)) 
      {
        numItems = numItems + parseInt(getInput);
        var getCart = document.getElementById("item-count");
        getCart.innerHTML = numItems;
        getForm.reset();            
      }
      else 
      {
        alert("Please enter a valid number");
      }
  }

HTML Cart:

<div class="basket">
    <p><i class="fa fa-shopping-basket"></i></p>
    <p id="item-count">0</p>
</div>

HTML Form . For brevity, I publish only one example of a form, but in fact I have 6 other forms that are exactly the same.

<div class="buy-config">
    <form class="buy-form" name="buy-form">
        <label>Quantity:</label>
            <input type="text" class="num-item" />
            <button class="buy-btn">Add to Cart</button>
    </form>
</div>

Answer 1

, ( , , - getElementsByClassName) for.

"", addEventListener. ( ) , .

, ​​ this.

:

• . , , , "" ( ). , numItems , .
• input type="number" HTML. - / . , , .

var forms = document.getElementsByClassName("buy-form");
for (var i = 0; i < forms.length; i++) {
  forms[i].addEventListener("submit", function(event) {
    event.preventDefault();
    var numItems = parseInt(document.getElementById("item-count").innerHTML);
    var getInput = this.getElementsByClassName("num-item")[0].value;
    if (parseInt(getInput)) {
      numItems = numItems + parseInt(getInput);
      var getCart = document.getElementById("item-count");
      getCart.innerHTML = numItems;
      this.reset();
    } else {
      alert("Please enter a valid number");
    }
  });
}

<div class="basket">
  <p><i class="fa fa-shopping-basket"></i></p>
  <p id="item-count">0</p>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>

Hide result

Answer 2

jQuery.

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function() {
      $('.buy-btn').click(function(){
          $(this).parent('form').submit();
      });
    });
</script>

<form class="buy-form">
   <label>Quantity:</label>
   <input type="text" class="num-item" />
   <button class="buy-btn">Add to Cart</button>
</form>

​​ HTML- css buy-btn. , parent, children, prev, next find jQuery.

, , , :

$('.buy-btn').click(function(){
   $(this).parent('form').submit();
   //var itemCount = $('#item-count').html();
   //itemCount++;
   //$('#item-count').html(itemCount);
   var numItem = $(this).prev('.num-item').val();
   $('#item-count').html(numItem);
});

Answer 3

Unfortunately, you will have to iterate over the elements in your JavaScript and assign a function to each, however you can make it a little easier using some methods querySelectorthat have been added to:

window.onload = function() {
    var getCart = document.getElementById('item-count');
    var forms = document.querySelectorAll('.buy-form');
    var numItems = 0;
    var isNum = function(n) {
        return(!isNaN(parseFloat(n)) && isFinite(n));
    };
    var handler = function(e) {
        (e || event).preventDefault();
        var getInput = this.querySelector('.num-item').value;
        if(isNum(getInput)) {
            numItems += parseInt(getInput);
            getCart.innerHTML = numItems;
            this.reset();            
        } else {
            alert("Please enter a valid number");
        }
    };
    for(var i = 0, len = forms.length; i < len; i++) {
        forms[i].addEventListener('submit', handler);
    }
};