Question

我知道这已经被问过了，但是我似乎无法正确地做到这一点。我需要从两个文本框中获取输入值，然后将其添加到另一个文本框中，并在键入两个文本框后在第三个文本框中显示该答案。不过，似乎什么都没有发生。谢谢

这是HTML

 //Input 1 
  <input name="attribute_campaign_addon_one_time_cost_value" id="am_attribute_campaign_addon_one_time_cost_value">

 //Input 2 
 <input name="attribute_campaign_addon_total_monthly_cost_value" id="attribute_campaign_addon_total_monthly_cost_value">

//Input 3 where added answer should go
 <input name="attribute_campaign_addon_total_monthly_cost_calculated_value" id="am_attribute_campaign_addon_total_monthly_cost_calculated_value" value=""> 

 //JQ
  var $oneTimeCostField = $('#am_attribute_campaign_addon_one_time_cost_value');
  var $recurringTotalCostField = $('#am_attribute_campaign_addon_total_monthly_cost_value');
  var $totalRetailAmountField = $('#am_attribute_campaign_addon_total_monthly_cost_calculated_value');

  function calcVal() {
        var num1 = $oneTimeCostField.val();
        var num2 = $recurringTotalCostField.val();
        var result = parseInt(num1) + parseInt(num2);
        if (!isNaN(result)) {
            $totalRetailAmountField.val() = result;
        }
    }

 calcVal();
  $(num1, num2).on("keydown keyup", function() {
    calcVal();
});

Answer 1

http://api.jquery.com/val/

jquery输入值设置如下：

   $totalRetailAmountField.val(result);

Answer 2

第一件事，我从未见过name和id这么大的价值。这不仅会导致可读性问题，还会引入错误，例如id中不需要的空间

第二num1和num2已经是jquery对象，那么$(num1, num2)的用途是什么

通过将vale作为函数参数$totalRetailAmountField.val(result);传递来第三次更新第三个输入的值

var $oneTimeCostField = $('#am_attribute_campaign_addon_one_time_cost_value');
var $recurringTotalCostField = $('#attribute_campaign_addon_total_monthly_cost_value');
var $totalRetailAmountField = $('#am_attribute_campaign_addon_total_monthly_cost_calculated_value');

function calcVal() {
  var num1 = $oneTimeCostField.val();
  var num2 = $recurringTotalCostField.val();
  var result = parseInt(num1) + parseInt(num2);
  if (!isNaN(result)) {
    $totalRetailAmountField.val(result);
  }
}


$('#attribute_campaign_addon_total_monthly_cost_value,#am_attribute_campaign_addon_one_time_cost_value').on("keydown keyup", function() {

  calcVal();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="attribute_campaign_addon_one_time_cost_value" id="am_attribute_campaign_addon_one_time_cost_value">

<input name="attribute_campaign_addon_total_monthly_cost_value" id="attribute_campaign_addon_total_monthly_cost_value">

<input name="attribute_campaign_addon_total_monthly_cost_calculated_value" id="am_attribute_campaign_addon_total_monthly_cost_calculated_value" value=" ">

Answer 3

这是您查询的相当详细的解决方案。聆听每个输入的更改，并将其各自的值应用于最终答案输入（input#fa）

const a1 = document.querySelector('#a1')
const a2 = document.querySelector('#a2')
const fa = document.querySelector('#fa')
const answers = []

const _handleFinalAnswer = () => (fa.value = (+answers[0] || 0) + (+answers[1] || 0))

a1.addEventListener('change', e => {
  const { value } = e.target
  answers[0] = value
  
  _handleFinalAnswer()
})

a2.addEventListener('change', e => {
  const { value } = e.target
  answers[1] = value

  _handleFinalAnswer()
})

<input type="number" step="any" name="answer 1" id="a1" />
<input type="number" step="any" name="answer 2" id="a2" />

<input name="final answer" id="fa" />

或者这是一种更动态的方法来计算所有可能的输入量以获得最终总和，但是仍然可以使用两个输入来完成：-）

const answersInputs = document.querySelectorAll('input.answer')
const finalAnswer = document.querySelector('#fa')

const _getSummedValues = () => (
  [...answersInputs]
  .map(input => +input.value || 0)
  .reduce((prev, curr) => prev+curr, 0)
)

const _setFinal = () => finalAnswer.value = _getSummedValues()

answersInputs.forEach(input => input.addEventListener('change', _setFinal))

<input type="number" step="any" name="answer 1" class="answer" />
<input type="number" step="any" name="answer 2" class="answer" />
<input type="number" step="any" name="answer 3" class="answer" />
<input type="number" step="any" name="answer 4" class="answer" />
<input type="number" step="any" name="answer 5" class="answer" />
<input type="number" step="any" name="answer 6" class="answer" />
<input type="number" step="any" name="answer 7" class="answer" />


<input name="final answer" id="fa" />

Answer 4

您的onkeyup / down选择器错误，并且您的总计字段ID错误。可以这样设置结果：$totalRetailAmountField.val(result);

 //JQ
  var $oneTimeCostField = $('#am_attribute_campaign_addon_one_time_cost_value');
  var $recurringTotalCostField = $('#am_attribute_campaign_addon_total_monthly_cost_value');
  var $totalRetailAmountField = $('#am_attribute_campaign_addon_total_monthly_cost_calculated_value');

  function calcVal() {
    
        var num1 = $oneTimeCostField.val();
        var num2 = $recurringTotalCostField.val();
        var result = parseInt(num1, 10) + parseInt(num2, 10);
        console.log("calcVal ", num1,num2, result);
        if (!isNaN(result)) {
            $totalRetailAmountField.val(result);
        }
    }

 calcVal();
  $oneTimeCostField.on("keydown keyup", function() {
    calcVal();
  });
  $recurringTotalCostField.on("keydown keyup", function() {
    calcVal();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//Input 1 
  <input name="attribute_campaign_addon_one_time_cost_value" id="am_attribute_campaign_addon_one_time_cost_value">

 //Input 2 
 <input name="attribute_campaign_addon_total_monthly_cost_value" id="am_attribute_campaign_addon_total_monthly_cost_value">

//Input 3 where added answer should go
 <input name="attribute_campaign_addon_total_monthly_cost_calculated_value" id="am_attribute_campaign_addon_total_monthly_cost_calculated_value" value="">

在键盘上添加2个输入值以在第3个输入框中获得答案

4 个答案: