javascript - 使用 JavaScript onChange 函数更改字段值

Question

我正在尝试更改quota-adesao值，这是由值quota-entrada决定的值quota-parcelas

JavaScript

adesao = 0.00;
entrada = document.getElementById('quota-entrada');
parcelas = document.getElementById('quota-parcelas');
var adesaoResult = document.getElementById('quota-adesao');


const totalAdesao = document.querySelectorAll('.quota-row');
totalAdesao.forEach(entrada => {

    var index = entrada.getAttribute('data-index');
    var entrada = document.getElementById(`quota-entrada-${index}`);
    var parcelas = document.getElementById(`quota-parcelas-${index}`);
    //parseFloat(entrada);

    adesao = parseFloat(entrada.value) / parcelas;

})

adesaoResult.value = adesao;

HTML

我正在使用 onchange 进行quota-adesao计算，quota-parcelas插入时quota-adesao会自动填充

<div class="row quota-row" data-index="0">

  <div class="col-8" id="quota-principal">

    <div>
      <div class="col-xs-2">
        <span>Entrada 1</span>
        <input type="text" onblur="calculaRestante(this)" data-index="0" id="quota-entrada-0" required="" name="entrada[]" placeholder="Primeira Parte" id="valor8" value="0">
      </div>

      <div class="col-xs-2 dateInput">
        <span>Forma de Pagamento</span>
        <select onchange="onChangeFormaPagamento(this)" data-index="0" id="quota-forma-pagamento-0" name="forma_pagamento[]">

          <option value="">Selecione a forma de pagamento</option>

          <?php foreach ($formas_pagamentos as $forma_pagamento) { ?>

          <option value="<?= $forma_pagamento->id_formas_pagamento ?>">
            <?= $forma_pagamento->forma_pagamento ?>
          </option>

          <?php } ?>

        </select>
      </div>

      <div class="col-xs-1 dateInput">
        <span>Parcelas</span>
        <select data-index="0" id="quota-parcelas-0" name="parcelas[]" onchange="calculaAdesao()">
          <option value=""></option>
        </select>
      </div>

      <div class="col-xs-2">
        <span>Vencimento</span>

        <input data-index="0" id="quota-vencimento-0" type="date" required="" name="vencimento[]" placeholder="Entrada">

      </div>
      <div class="col-xs-2">
        <span>Adesão</span>
        <input data-index="0" id="quota-adesao-0" type="text" required="" name="adesao[]" placeholder="Valor de entrada">
        <!-- id="valor6" -->
      </div>
    </div>
  </div>

标签： javascripthtmlarrays

Answer 1

因为我不太明白你想如何实现代码和功能，所以我做了以下假设：首先我假设用户能够插入多个“Entrada”。然后，您的代码将在基础中看起来像这样：

<div class="row quota-row">
    <h3>First</h3>
    <div class="col-8 quota-principal" data-index="0">
       ...Entrada
    </div>

    <h3>Second</h3>
    <div class="col-8 quota-principal" data-index="1">
       ...Entrada
    </div>
</div>

这样，您可以通过使用 选择它来循环遍历每个 entrada document.querySelectorAll('.quota-principal')。这些元素中的每一个都有一个属性data-index，它给你一个类似的数字等0,1,2。有了这个数字，你就可以得到带有id类似的项目，<input type="text" id="quota-entrada-0" ... />而你提供的代码是不可能的。

现在您可以正确选择和设置adesaoTest每个quota-principal.

完整的工作示例可以在下面找到。

function calculaAdesao() {
    adesao = 0.00;

    const totalAdesao = document.querySelectorAll('.quota-principal');
    totalAdesao.forEach(entrada => {
      var index = entrada.getAttribute('data-index');
      var entrada = document.getElementById(`quota-entrada-${index}`);
      var parcelas = document.getElementById(`quota-parcelas-${index}`);
      let adesaoTest = document.getElementById(`quota-adesao-${index}`);
      adesao = parseFloat(entrada.value) / parcelas.value;
      adesaoTest.value = isNaN(adesao) ? "" : adesao;

    })
  }

  function calculaRestante(l) {}

  function onChangeFormaPagamento(l) {}

  <div class="row quota-row">
    <h3>First</h3>
    <div class="col-8 quota-principal" data-index="0">

      <div>
        <div class="col-xs-2">
          <span>Entrada 1</span>
          <input type="text" onblur="calculaRestante(this); calculaAdesao()" id="quota-entrada-0" required="" name="entrada[]" placeholder="Primeira Parte" id="valor8" value="0">
        </div>

        <div class="col-xs-2 dateInput">
          <span>Forma de Pagamento</span>
          <select onchange="onChangeFormaPagamento(this)" id="quota-forma-pagamento-0" name="forma_pagamento[]">
            <option value="">Selecione a forma de pagamento</option>
            <option value="card">cartão
            <option value="dinheiro">dinheiro
          </select>
        </div>

        <div class="col-xs-1 dateInput">
          <span>Parcelas</span>
          <select data-index="0" id="quota-parcelas-0" name="parcelas[]" onchange="calculaAdesao()">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>

          </select>
        </div>

        <div class="col-xs-2">
          <span>Vencimento</span>
          <input id="quota-vencimento-0" type="date" required="" name="vencimento[]" placeholder="Entrada">
        </div>
        <div class="col-xs-2">
          <span>Adesão</span>
          <input id="quota-adesao-0" type="text" required="" name="adesao[]" placeholder="Valor de entrada">
          <!-- id="valor6" -->
        </div>
      </div>
    </div>

    <h3>Second</h3>
    <div class="col-8 quota-principal" data-index="1">

      <div>
        <div class="col-xs-2">
          <span>Entrada 1</span>
          <input type="text" onblur="calculaRestante(this); calculaAdesao()" id="quota-entrada-1" required="" name="entrada[]" placeholder="Primeira Parte" value="0">
        </div>

        <div class="col-xs-2 dateInput">
          <span>Forma de Pagamento</span>
          <select onchange="onChangeFormaPagamento(this)" id="quota-forma-pagamento-1" name="forma_pagamento[]">
            <option value="">Selecione a forma de pagamento</option>
            <option value="card">cartão
            <option value="dinheiro">dinheiro
          </select>
        </div>

        <div class="col-xs-1 dateInput">
          <span>Parcelas</span>
          <select id="quota-parcelas-1" name="parcelas[]" onchange="calculaAdesao()">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>

          </select>
        </div>

        <div class="col-xs-2">
          <span>Vencimento</span>
          <input id="quota-vencimento-1" type="date" required="" name="vencimento[]" placeholder="Entrada">
        </div>
        <div class="col-xs-2">
          <span>Adesão</span>
          <input id="quota-adesao-1" type="text" required="" name="adesao[]" placeholder="Valor de entrada" value="">
          <!-- id="valor6" -->
        </div>
      </div>
    </div>
  </div>

希望对你有帮助，如果没有请评论！