There is a form in which we can choose whether we want additional pizza ingredients. Supplements with prices in checkboxes. When you click on Submit, you need to display the final price on the screen

<nav class='navbar navbar-default'> <div class='container'> <div class="navbar-header"> </div> </div> </nav> <div class="container"> <div class='col-xs-12 col-sm-6 col-sm-offset-3'> <div class='page-header'> <h1>add-ons</h1> <p> Total price: <span id="price">0 USD</span> </p> </div> <div class='panel'> <div class='panel-body'> <form> <div class="checkbox"> <label><input type="checkbox">All add-ons</label> </div> <div class="checkbox"> <label><input type="checkbox" data-price="3.50">Cheese, 3,50 USD</label> </div> <div class="checkbox"> <label><input type="checkbox" data-price="2.20">Sous, 2,20 USD</label> </div> <div class="checkbox"> <label><input type="checkbox" data-price="5.00">Ham, 5 USD</label> </div> <div class="checkbox"> <label><input type="checkbox" data-price="4.10">Pineapple, 4,10 USD</label> </div> <div class="checkbox"> <label><input type="checkbox" data-price="3.50">Mushrooms, 3,50 USD</label> </div> <div class="checkbox"> <label><input type="checkbox">Clean</label> </div> <br> <p> <button class='btn btn-primary'>Submit</button> </p> </form> </div> </div> </div> </div>

  • 2
    and what's the problem? collect all the input elements, collect all the checked items, summarize the value of the datpray attribute and display it on the screen - dasauser
  • one
    Correct spelling errors and specify "must" or "can" choose. - XelaNimed Nov.
  • one
    @Taras Something I do not see your attempts to do all these things. - Igor

1 answer 1

 let elements = document.forms.myform.querySelectorAll("input[type='checkbox']"); let button = document.querySelector('.btn'); let totalCost; button.addEventListener('click', fn); function fn(){ totalCost = 0; for(item of elements){ if(item.checked){ totalCost += parseFloat(item.getAttribute('data-price')); } } }

Do not forget to add an id to the form <form id="myform"></form>