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

Question

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

To:

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

потому, что вы не иметь идентификатор как in[index], но эта форма invoiceBalance[index], надежда, что поможет См Working Fiddle.