Этот параметр не передает ожидаемый элемент

Question

У меня динамический набор полей ввода генерируется. Все они именуются последовательно, и у каждого есть обработчик onFocus(). Непосредственно перед каждым элементом Input есть 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,"");

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

<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)" />

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] но эта форма invoiceBalance[index]Надеюсь, что это поможет увидеть рабочую скрипку.