Изменить значение поля с помощью функции onChange JavaScript

ProgramBox

Изменить значение поля с помощью функции onChange JavaScript

Post author:admin
Запись опубликована:16 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #arrays

#javascript #HTML #массивы

Вопрос:

Я пытаюсь изменить 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>

1. Привет, добро пожаловать в SO! Не могли бы вы, возможно, предоставить интерфейсную часть без тегов php? Просто поместите туда какой-нибудь фиктивный код. Это упрощает поиск решения вашей проблемы!

2. Здравствуйте, мне удалось решить часть проблемы, как следует из ответа

3. Я понимаю. Правильно ли, что внутри <div class="row quota-row" data-index="0"> есть несколько экземпляров <div class="col-8" id="quota-principal"> ? И внутри каждого из них quota-principal вы должны вычислять другое значение?

Ответ №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;

})

Ответ №2:

поскольку я не мог до конца понять, как вы хотите реализовать код и функции, я сделал следующие предположения: Сначала я предположил, что пользователь сможет вставить несколько «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>

Таким образом, вы могли бы перебирать каждую входную строку, выбирая ее с помощью 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>

Надеюсь, это может чем-то помочь, если нет, пожалуйста, прокомментируйте!

1. Большое вам спасибо, друг, ваш ответ мне очень полезен. Но я обнаружил проблему, не глядя на то, что она отправила данные второго элемента. Ошибка заключается в том, что в идентификаторе, который ищет элемент «quota-adesao», было пробел, что привело к конфликту при поиске идентификатора

2. отличный ответ, проблема была меньше, чем я предполагал

3. Приятно слышать! Помогло ли это вам в конце концов?

4. Да, я доволен JavaScript и хочу узнать больше