当另一个 Input 控件的文本更改时，如何更改 Input 控件的值？答案

【问题标题】：How to change the value of an Input control when the text of another Input control is changed?当另一个 Input 控件的文本更改时，如何更改 Input 控件的值？
【发布时间】：2021-03-26 18:34:23
【问题描述】：

我需要如下图所示的输出。我创建了三个输入，并将它们放在下面的框中。我怎么能有这样的输出？请帮忙举个例子

注意：假设我们有 50 个输入并且类相同获取ID后无法使用

我的 HTML 代码

  <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 代码：

 $(".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);
  });

【问题讨论】：

do not be bored ???代码尝试（来自您）意味着您尽可能地关心我们可能会尝试关心。这是诚意的体现。
@Swati 它在 Chrome 浏览器上对我有效，但在 Safari 上无效
@sonali 不能在 chrome 上工作：D
请解释[lain your note
我用了你说的方法，但问题是我们有几十个输入。见以下链接：alomykar.ir/qw当我们在第二个和第三个输入以及其他想法是SalePrice的输入中更改SalePrice的值时，第一个输入的利润发生了变化，这是不正确的。@sonali

标签： javascript html node.js ajax

【解决方案1】：

你可以试试

 $(".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');
    }
    
 });

【讨论】：

【解决方案2】：

您可以在 SalePrice(input) 的 onchange 、 oninput 或 onClick 事件上调用更改 Profit (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 />

更多信息：

stepUp()

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

stepDown()

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

【讨论】：

【解决方案3】：

您好，我认为这可能会有所帮助。为您的输入字段使用 id。

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>

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

【讨论】：

你好，效果很好，但问题是如果我们有三个输入，值就会出错！