Shopping car feedback please

JavaScript
1

Hello guys I would like to know your opinion on this little piece of code, just trying to make a very little shopping car.
HTML

<form action="" id="theForm">
        <fieldset>
            <legend>
                Products
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Candy $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Burger $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Coke $1.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>

JS

function totalIt() {
  var input = document.getElementsByName("product");
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      total += parseFloat(input[i].value);
    }
  }
  document.getElementById("total").value = "$" + total.toFixed(2);
}

CODEPEN

2

Looks pretty neat. Good work!

I think a good next step would be to add an Array of objects in the .js [{name: ... , price: ...}, ...] and automatically build each label in the html. Then you easily add/remove items from the list and easier to build on. You could also add a function to alert after hitting submit to display the item’s checked + price.

If you added these, you’ve created a nice storefront with the ability to load a JSON file of items then pass the purchase info to a ‘check-out’ area.