Question

我生成了一组动态输入字段。它们都按顺序命名，每个都有一个onFocus（）处理程序。就在每个Input元素之前是一个具有相应Id的div，我从中获取一个美元值。

<input type="hidden" name="balance" value="2500.0" />  
<div id="invoiceAmount0">$500.00</div>
<input type="text" size="8" id="invoiceBalance0" name="invoiceBalance0" value="" onfocus="setBalance(this)" />
<div id="invoiceAmount1">$500.00</div>
<input type="text" size="8" id="invoiceBalance1" name="invoiceBalance1" value="" onfocus="setBalance(this)" />
<div id="invoiceAmount2">$500.00</div>
<input type="text" size="8" id="invoiceBalance2" name="invoiceBalance2" value="" onfocus="setBalance(this)" />

JS onFocus处理程序如下：

function setBalance(e) //e should be an input field element
{
  var balance = document.PaymentForm.balance.value;
  var remainder = balance;

  var index = 0;
  var paymentField = document.getElementById('invoiceBalance'+index);  //get the first input payment element
  while (paymentField != null && paymentField != e) //start with the first field and calculate the remaining balance
  {
    var paymentApplied = paymentField.value.replace(/[^0-9\.]+/g,""); 
    remainder = remainder - paymentApplied;
    index++;
    paymentField = document.getElementById('invoiceBalance'+index);  
  }
  while (e == paymentField)  //set the selected elements value
  {
    var invoiceBalance = document.getElementById('in'+index).innerHTML.replace(/[^0-9\.]+/g,"");
    if (parseFloat(remainder) > parseFloat(invoiceBalance))
      e.value = parseFloat(invoiceBalance).toFixed(2).toLocaleString();    
    else
      e.value = parseFloat(remainder).toFixed(2).toLocaleString();
    index++;
    paymentField = document.getElementById('invoiceBalance'+index); 
  }
  while (paymentField != null)  //blank out the rest of the input fields
  { 
    paymentField.value = ''; 
    index++;
    paymentField = document.getElementById('invoiceBalance'+index); 
  }
  e.select();
}

这里的概念是计算剩余余额，并在用户关注字段时设置输入字段的值。

问题是“this”参数始终设置为第一个Input元素“invoiceBalance0”。我期待它被设置为在它的onFocus处理程序中引用它的元素。

我没看到什么？

Answer 1

我无法复制您描述的错误，但我确实注意到了一个错字：

var invoiceBalance = document.getElementById('in'+index).innerHTML.replace(/[^0-9\.]+/g,"");

看起来应该是

var invoiceBalance = document.getElementById('invoiceAmount'+index).innerHTML.replace(/[^0-9\.]+/g,"");

＆＃13;

function setBalance(e) //e should be an input field element
  {
    var balance = document.querySelector('[name="balance"]').value;
    var remainder = balance;
    var index = 0;
    var paymentField = document.getElementById('invoiceBalance' + index); //get the first input payment element
    while (paymentField != null && paymentField != e) //start with the first field and calculate the remaining balance
    {
      var paymentApplied = paymentField.value.replace(/[^0-9\.]+/g, "");
      remainder = remainder - paymentApplied;
      index++;
      paymentField = document.getElementById('invoiceBalance' + index);
    }
    while (e == paymentField) //set the selected elements value
    {
      var invoiceBalance = document.getElementById('invoiceAmount' + index).innerHTML.replace(/[^0-9\.]+/g, "");
      if (parseFloat(remainder) > parseFloat(invoiceBalance))
        e.value = parseFloat(invoiceBalance).toFixed(2).toLocaleString();
      else
        e.value = parseFloat(remainder).toFixed(2).toLocaleString();
      index++;
      paymentField = document.getElementById('invoiceBalance' + index);
    }
    while (paymentField != null) //blank out the rest of the input fields
    {
      paymentField.value = '';
      index++;
      paymentField = document.getElementById('invoiceBalance' + index);
    }
    e.select();
  }

＆＃13;

<input type="hidden" name="balance" value="2500.0" />
<div id="invoiceAmount0">$500.00</div>
<input type="text" size="8" id="invoiceBalance0" name="invoiceBalance0" value="" onfocus="setBalance(this)" />
<div id="invoiceAmount1">$500.00</div>
<input type="text" size="8" id="invoiceBalance1" name="invoiceBalance1" value="" onfocus="setBalance(this)" />
<div id="invoiceAmount2">$500.00</div>
<input type="text" size="8" id="invoiceBalance2" name="invoiceBalance2" value="" onfocus="setBalance(this)" />

＆＃13;

Answer 2

改变这一行后它的工作原理：

var invoiceBalance = document.getElementById('in'+index).innerHTML.replace(/[^0-9\.]+/g,"")

致：

var invoiceBalance =  document.getElementById('invoiceBalance'+index).innerHTML.replace(/[^
0-9\.]+/g,"");

因为您没有in[index]之类的ID，但此表单invoiceBalance[index]，希望这有助于查看的 Working Fiddle

此参数未传递预期元素

2 个答案: