Display and calculate input number

How do i automatically display every time I input number and calculate it.

Then the pick button will trigger to calculate the price, my base price would be 100. so if its 2 layers it will be 200 ,

  <br> Layer  <input type="number" min="1" id="cake_layer" name="cake_layer" /> <!-- onchange="updateTotal()" -->
  <input type="button" value="Pick" id="choose" /> 
  
  <br>
  Layer inputed <div class="layer_display"> </div>
  <br>
   Layer Amount <div class="layer_amt"> </div>

I really need help. thank you !!!

Answers 1

  • Is this what you want to do?

    var cakeLayer = document.getElementById("cake_layer"),
      price = 100,
      layerDisplay = document.getElementsByClassName("layer_display")[0],
      layerAmt = document.getElementsByClassName("layer_amt")[0];
    
    cakeLayer.onchange = function(event) {
      var amount = this.value || 0,
        totalPrice = amount * price;
    
      layerDisplay.innerText = totalPrice;
      layerAmt.innerText = amount;
    
    }
    <input type="number" min="1" id="cake_layer" name="cake_layer" />
    <!-- onchange="updateTotal()" -->
    <input type="button" value="Pick" id="choose" />
    <br> total price
    <div class="layer_display"> </div>
    <br> Layer Amount
    <div class="layer_amt"> </div>


Related Articles