Display and calculate input number

Question

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 !!!

Welcome to StackOverflow! In order for us to help you better, please update your question so that it shows all relevant code in a minimal, complete, and verifiable example. Also be sure to let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding how to ask good questions. — Obsidian Age
– Obsidian Age, Commented Feb 24, 2017 at 2:14

Julien · Accepted Answer · 2017-02-24 02:38:06Z

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>

answered Feb 24, 2017 at 2:38

Julien

1,24816 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Josh · Accepted Answer · 2017-02-24 02:24:05Z

1

You can achieve this by using JavaScript or jQuery. That's the only way to manipulate the DOM.

See this working jsfiddle I made: https://jsfiddle.net/jw6q53fz/1/

HMTL

<div>
    <label for="cake_layer">Layer</label>
    <input type="number" class="cake_layer" name="cake_layer" id="cake_layer"/>
    <button id="choose">Pick</button>
</div>  
<div>
    <p>Layer inputed: <span class="layer_display"> </span></p>
    <p>Layer Amount: <span class="layer_amt"> </span></p>
</div>

jQuery

$('#choose').on('click', function(){
    var cakeLayerValue = $('#cake_layer').val();
    $('.layer_display').html(cakeLayerValue);
    $('.layer_amt').html(cakeLayerValue * 100);
});

answered Feb 24, 2017 at 2:24

Josh

1,47419 silver badges34 bronze badges

Collectives™ on Stack Overflow

Display and calculate input number

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related