Получить несколько значений при изменении из нескольких входных данных Javascript

Я пытаюсь получить каждое значение из поля оплаты в соответствии с типом оплаты. Когда и цена, и оплата имеют значение, поле ввода оплаты будет заполнено платой - цена, а поле общей суммы будет заполнено при выборе типа оплаты.

Во второй ситуации, когда у меня есть более одной формы и один и тот же тип платежа (например, НАЛИЧНЫМИ), он автоматически суммирует оба платежа и отображает ОБЩУЮ СУММУ, ЗАДАННУЮ НАЛИЧНЫМИ.

И это то, что я сделал

// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");

btn.addEventListener("click", (e) => {
  e.preventDefault();

  const clone = formClone.cloneNode(true);
  clone.querySelectorAll("input").forEach((e) => {
    e.value = "";
  });
  parentForm.appendChild(clone);

  const deleteForm = document.createElement("button");
  deleteForm.innerText = "X";
  deleteForm.classList.add("btn", "btn-danger", "btn-sm");
  clone.appendChild(deleteForm);

  deleteForm.addEventListener("click", (e) => {
    e.preventDefault();
    e.target.parentElement.remove();
  });
});

const payment = document.querySelector(".type-payment");
const price = document.querySelector(".input-price");
const pay = document.querySelector(".input-pay");
const allInputSum = document.querySelectorAll(".sum");
const inputTotal = document.querySelector(".input-total");

let result;
let totalValue;
function handleSelectChange(event) {
  result = payment.value;
  totalValue = pay.value - price.value;
  inputTotal.value = totalValue.toLocaleString();

  let inputSum = Array.from(allInputSum).filter((e) => {
    if (e.id == result) {
      e.value = inputTotal.value;
    }
  });
}
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous">

<button id = "add-button" class = "btn btn-primary mb-3">Add Form</button>
<div class = "wrappers">
  <div class = "row clone mb-2">
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          type = "number"
          class = "form-control rounded-0 input-price"
          placeholder = "Price"
          onchange = "handleSelectChange(event)"
        />
      </div>
    </div>
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          type = "number"
          class = "form-control rounded-0 input-pay"
          placeholder = "Pay"
          onchange = "handleSelectChange(event)"
        />
      </div>
    </div>
    <div class = "col-auto px-0">
      <div class = "input-group mb-2">
        <select
          class = "form-control rounded-0 type-payment"
          role = "button"
          onchange = "handleSelectChange(event)"
        >
          <option value = "CASH">CASH</option>
          <option value = "DEBIT">DEBIT</option>
          <option value = "CASHLESS">CASHLESS</option>
        </select>
      </div>
    </div>
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          onchange = "handleSelectChange(event)"
          value = "0.00"
          type = "text"
          class = "form-control rounded-0 input-total"
          disabled
        />
      </div>
    </div>
  </div>
</div>
<div class = "pt-4">
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL CASH"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "CASH"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL DEBIT"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "DEBIT"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL CASHLESS"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "CASHLESS"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin = "anonymous"></script>
And this is what I've done - в чем проблема с этим кодом?
Cristik 26.01.2023 12:51
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
94
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ты на правильном пути.

Проблема в том, что после клонирования узла в JavaScript его прослушиватели событий не копируются из исходного элемента.

В вашем случае все поля ввода, которым вы назначили событие onChangehandleSelectChange, потеряли эти прослушиватели событий в клонированном узле.

Все, что вам нужно сделать, это переназначить это событие onChange элементу клонированных узлов.

// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");

btn.addEventListener("click", (e) => {
  e.preventDefault();

  const clone = formClone.cloneNode(true);
  clone.querySelectorAll("input").forEach((e) => {
    e.value = "";
  });
  
  clone.querySelector(".type-payment").addEventListener('change', handleSelectChange);
  clone.querySelector(".input-price").addEventListener('change', handleSelectChange);
  clone.querySelector(".input-pay").addEventListener('change', handleSelectChange);
  
  parentForm.appendChild(clone);

  const deleteForm = document.createElement("button");
  deleteForm.innerText = "X";
  deleteForm.classList.add("btn", "btn-danger", "btn-sm");
  clone.appendChild(deleteForm);

  deleteForm.addEventListener("click", (e) => {
    e.preventDefault();
    e.target.parentElement.remove();
  });
});


const allInputSum = document.querySelectorAll(".sum");


function handleSelectChange(event) {
    const forms = document.querySelectorAll(".clone");
  const totals = {'CASHLESS': 0, 'DEBIT': 0, 'CASH': 0};
  
  forms.forEach(form => {
      const payment = form.querySelector(".type-payment");
    const price = form.querySelector(".input-price");
    const pay = form.querySelector(".input-pay");
    const inputTotal = form.querySelector(".input-total");
    let totalValue;

    totalValue = pay.value - price.value;
    inputTotal.value = totalValue.toLocaleString();
    totals[payment.value] += totalValue;
    })
  
  Array.from(allInputSum).filter((e) => {
    console.info([e.value, e.id, totals])
    e.value = totals[e.id] || 0;
  });

}
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity = "sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin = "anonymous">

<button id = "add-button" class = "btn btn-primary mb-3">Add Form</button>
<div class = "wrappers">
  <div class = "row clone mb-2">
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          type = "number"
          class = "form-control rounded-0 input-price"
          placeholder = "Price"
          onchange = "handleSelectChange(event)"
        />
      </div>
    </div>
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          type = "number"
          class = "form-control rounded-0 input-pay"
          placeholder = "Pay"
          onchange = "handleSelectChange(event)"
        />
      </div>
    </div>
    <div class = "col-auto px-0">
      <div class = "input-group mb-2">
        <select
          class = "form-control rounded-0 type-payment"
          role = "button"
          onchange = "handleSelectChange(event)"
        >
          <option value = "CASH">CASH</option>
          <option value = "DEBIT">DEBIT</option>
          <option value = "CASHLESS">CASHLESS</option>
        </select>
      </div>
    </div>
    <div class = "col px-0">
      <div class = "input-group mb-2">
        <input
          onchange = "handleSelectChange(event)"
          value = "0.00"
          type = "text"
          class = "form-control rounded-0 input-total"
          disabled
        />
      </div>
    </div>
  </div>
</div>
<div class = "pt-4">
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL CASH"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "CASH"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL DEBIT"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "DEBIT"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
  <div class = "row">
    <div class = "col-md-8 pr-0">
      <input
        class = "form-control total rounded-0"
        disabled
        placeholder = "TOTAL CASHLESS"
      />
    </div>
    <div class = "col-md-4 pl-0">
      <input
        id = "CASHLESS"
        class = "form-control rounded-0 sum"
        disabled
        placeholder = "0.00"
      />
    </div>
  </div>
</div>

<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity = "sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin = "anonymous"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity = "sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin = "anonymous"></script>

Попробуйте этот код, я внес необходимые изменения, которые вам нужны.

Как это сделать? @DipoAhmed

Tom-Cat 11.01.2023 02:46

@Tom-Cat Попробуйте измененный код.

Dipo Ahmed 11.01.2023 05:57

Спасибо, это работает @DipoAhmed. Можете ли вы объяснить свой код?

Tom-Cat 11.01.2023 08:06

@Tom-Cat В вашем коде было несколько проблем. 1. Вы не назначили прослушиватели событий на скопированном узле. 2. Вы не рассчитали каждое поле ввода в форме. что я сделал, так это выбрал каждую строку из формы и сделал цикл for, вычислил сумму для каждой строки и установил ее как общую. Я также сохраняю эту сумму в объекте, где значение вашего платежа является ключевым. Все, что я делаю, это запускаю эту операцию для каждого события onChange полей ввода.

Dipo Ahmed 11.01.2023 08:38

АА, вижу. Я попробую разобраться. Спасибо @DipoAhmed

Tom-Cat 11.01.2023 09:16

Другие вопросы по теме