How to change the value of an Input control when the text of another Input control is changed?

Question

I need the following output as shown in the gif below. I created three inputs which I put in the box below. How can I have such output? Please help with an example

NOTE:Suppose we have 50 inputs and the class is the same I can't use it after Get ID

MY HTML code

  <span class="pricing-heading">Your sale price:</span><div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
                        </div>
                        <div class="prt-pricing-detial">
                          <span class="pricing-heading">Product base Cost:</span><div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
                        </div>
                        <div class="prt-pricing-detial">
                          <span class="pricing-heading">Your profit:</span><div class="pricing-field"><input class="pricing-profit" type="number" value="14.00" disabled></div>
                        </div>

JS code:

 $(".pricing-set-price").change(function(){
    var item_rrp = $(this).val();
    var item_base = $(this).parent().parent().parent().find('.pricing-base-price').val();
    var profit = item_rrp - item_base;
    var profit_format = profit.toFixed(2);
    $(this).parent().parent().parent().find('.pricing-profit').val(profit_format);
  });

Answer 1

You may try like

 $(".pricing-set-price").change(function(){
    let  currentValue = $(this).val();
    
    var previousValue = this.defaultValue;
    
    if(previousValue < currentValue){
        this.defaultValue = currentValue;
        console.log('Increment');
    }else{
        console.log('Decrement');
    }
    
 });

Answer 2

You can call the function that changes the value of Profit (input) on the onchange, oninput, or onClick events of the SalePrice(input)

 function increment() { document.getElementById('salePrice').stepUp(); calculateProfit() } function decrement() { document.getElementById('salePrice').stepDown(); calculateProfit() } function calculateProfit(){ let sp = document.getElementById("salePrice").value; document.getElementById("profit").value = sp - 10; }

 <input id="salePrice" type=number value=10 min=10 max=110 /> <button onclick="increment()">+</button> <button onclick="decrement()">-</button> <br/> Base Price:: <input type="text" id="basePrice" value=10 disabled > <br/> Profit:: <input type="text" id="profit" value=0 />

For more info about:

stepUp()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp

stepDown()

https://www.w3schools.com/Jsref/met_week_stepdown.asp

Answer 3

Hi i think this might help. use id for your input fields.

 function calculateProfit(val){ var baseCost = document.getElementById("baseCost").value; document.getElementById("Profit").value = (val - baseCost).toFixed(2); }

 <div class="prt-pricing-heading"> <span class="pricing-heading">Your sale price:</span> <div class="pricing-field"><input id="SalePrice" class="pricing-set-price" type="number" value="24.00" onchange="calculateProfit(this.value);" oninput="calculateProfit(this.value)"></div> </div> <div class="prt-pricing-detial"> <span class="pricing-heading">Product base Cost:</span> <div class="pricing-field"><input id="baseCost" class="pricing-base-price" type="number" value="10.00" disabled></div> </div> <div class="prt-pricing-detial"> <span class="pricing-heading">Your profit:</span> <div class="pricing-field"><input id="Profit" class="pricing-profit" type="number" value="14.00" disabled></div> </div>

For More info regarding:

oninput() https://www.w3schools.com/tags/att_oninput.asp

onchange() https://www.w3schools.com/tags/ev_onchange.asp