使用JavaScript onChange Function更改字段值

Question

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

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>

Answer 1

我用下面的代码解决了计算，但我仍然需要计算另一个"配额adesao"；你在索引中看到的。该代码只为索引-0 进行计算

function calculaAdesao() {
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}`);
var adesaoTest = document.getElementById(`quota-adesao-${index}`);
//parseFloat(entrada);
adesao = parseFloat(entrada.value) / parcelas.value;
adesaoTest.value = adesao;
})

Answer 2

由于我不太理解您想要如何实现代码和函数，我做出了以下假设：首先，我假设用户将能够插入多个"；恩特拉达的"；。然后，你的代码在底部会看起来像这样：

<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>

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

现在，您可以在每个quota-principal中正确地选择和设置adesaoTest元素。

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

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>

希望这能有任何帮助，如果没有请评论！