onblur = "function (this)" не работает для нескольких динамически создаваемых текстовых полей

Question

У меня три текстовых поля. которые включены розничная цена, количество и общая сумма. всякий раз, когда я вписываю розничную цену и количество в текстовые поля, необходимо автоматически умножать значения розничной цены и количества и сохранять в текстовое поле общей суммы. Проблема в том, что Мой код работает только один раз, но при добавлении динамически текстовых полей onblur = "cal (this)" не работает. я хочу, чтобы одна функция onblur = "cal (this)" работала несколько раз. дать решение.

Форма Bootstrap 3

  <td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
     readonly="true" onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
</td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>

JavaScript

function cal(_input)
{
    var first = document.getElementById('quantity').value;
    var second = document.getElementById('retail_price').value; 
    document.getElementById('amount').value = parseFloat(parseInt(first)*parseInt(second)).toFixed(3);

   }

Answer 1

@ jmtalarn дал правильный ответ, я просто хотел показать, как работать с DOM

Поскольку при изменении макета вам придется изменить код, и этого можно избежать, используя функциюfindAncestor.

function findAncestor(el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
}

function cal(intputElement)
{
  let row = findAncestor(intputElement, 'tr');

  let first = row.querySelector('[name=quantity]').value;
  let second = row.querySelector('[name=retail_price]').value; 
  
  let result = parseFloat(parseInt(first)*parseInt(second));
  
  if(result){
    row.querySelector('[name=amount]').value = result.toFixed(3);
  } else {
    // show error
  }
}
   
function validate(event){ return true; }

<table>
<tr>
<td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
      onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
</td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>
</tr>
<tr>
  <td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
      onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
  </td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>
</tr>
</table>

Answer 2

Ваша проблема в основном в том, что ваш javascript ищет элементы по идентификатору, так что он получает первый элемент в DOM с этим идентификатором. Действительно, работает и работает над первыми элементами с этими идентификаторами.

Не рекомендуется повторять идентификаторы для элементов документа. Тем не менее, вы должны искать элементы-братья onblur вместо элементов с фиксированным идентификатором.

Возможно, будет лучше код, использующий querySelector с некоторым селектором css по имени класса, например, добавление класса к этим элементам, так что вы можете использовать его для стилизации всех элементов этого документа или, еслисохраняйте это так, используйте селектор атрибутов

function cal(_input)
{
  const thisIsTD = _input.parentElement;
  const thisIsTR = thisIsTD.parentElement;


    var first = thisIsTR.querySelector('[name=quantity]').value;
    var second = thisIsTR.querySelector('[name=retail_price]').value; 
    thisIsTR.querySelector('[name=amount]').value = parseFloat(parseInt(first)*parseInt(second)).toFixed(3);

   }
   
 function validate(event){ return true; }

<table>
<tr>
<td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
      onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
</td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>
</tr>
<tr>
<td>
   <input type="text" class="form-control" name="quantity" id="quantity" 
   onblur="cal(this)" onkeypress='validate(event)' placeholder="Quantity"/>
  </td>
  <td>
      <input type="text" class="form-control" name="retail_price" 
      onkeypress='validate(event)' id="retail_price" 
  onblur="cal(this)" placeholder="Retail Price" />
</td>
  <td>
     <input type="text" readonly="true" class="form-control" name="amount" 
    id="amount" placeholder="Total Amount" onkeypress='validate(event)' />
  </td>
</tr>
</table>

---

«Если значение id не является пустой строкой, оно должно быть уникальным в документе». https://developer.mozilla.org/en-US/docs/Web/API/Element/id

Селектор запросов: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Селекторы атрибутов: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors