Показать сообщение отдельно
  #15 (permalink)  
Старый 18.05.2023, 06:02
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  body{
    font-size: 1rem;
    font-family: 'Courier New', Courier, monospace;
  }
  .calculation {
    margin: 0px auto 0px;
    max-width: 280px;
  }
  .total {
    margin: 20px 0px 20px 0px;
    font-size: 1.2rem;
  }
  .balance {
    padding: 5px 0px 5px 0px;
  }
  .arrival {
    padding: 5px 0px 5px 0px;
  }
  .total_amount {
    padding: 5px 0px 5px 0px;
  }
  .aumont {
    margin: 20px 0px 20px 0px;
    font-weight: 900;
  }
  .aumont_title {
  }
  .number {
  }
  .sum {
  }
  .checkbox {
  }
  .details_block {
    padding: 10px 0px 0px 20px;
    color: grey;
    font-size: .8rem;
    font-weight: 400;
  }
  .details {
    padding: 5px 0px 5px 0px;
  }
  .description {
  }
  </style>
</head>

<body>
  <div class="calculation">
    <div class="total">
      <div class="balance">
        <div class="balance_title">
          Остаток с прошлого собрания 
        </div>
        <div class="balance_sum">
          10 000
        </div>    
      </div>
      <div class="arrival">
        <div class="arrival_title">
          Приход на текущее собрания
        </div>
        <div class="arrival_sum">
          
        </div>
      </div>
      <div class="total_amount">
        <div class="total_amount_title">
          Общая сумма 
        </div>
        <div class="total_amount_sum">
          22 000
        </div>
      </div>
    </div>

    <div class="aumont summa">
      <div class="aumont_title">
        Предстовитель №1
      </div>
      <label class="all_sum number">
        <span class="sum">
          6 000
        </span>
        <input type="checkbox" checked="checked" class="checkbox">
      </label>
      <div class="details_block">
        <div class="details">
          <label class="number_details">
            <span class="sum_details">3 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проезд
          </div>
        </div>
        <div class="details">
          <label class="number_details">
            <span class="sum_details">3 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проживание
          </div>
        </div>
      </div>
    </div>
    <div class="aumont summa">
      <div class="aumont_title">
        Предстовитель №2
      </div>
      <label class="all_sum number">
        <span class="sum">
          4 000
        </span>
        <input type="checkbox" checked="checked" class="checkbox">
      </label>
      <div class="details_block">
        <div class="details">
          <label class="number_details">
            <span class="sum_details">2 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проезд
          </div>
        </div>
        <div class="details">
          <label class="number_details">
            <span class="sum_details">2 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проживание
          </div>
        </div>
      </div>
    </div>
    <div class="aumont summa">
      <div class="aumont_title">
        Предстовитель № 3
      </div>
      <label class="all_sum number">
        <span class="sum">
          2 000
        </span>
        <input type="checkbox" checked="checked" class="checkbox">
      </label>
      <div class="details_block">
        <div class="details">
          <label class="number_details">
            <span class="sum_details">1 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проезд
          </div>
        </div>
        <div class="details">
          <label class="number_details">
            <span class="sum_details">1 000</span>
            <input type="checkbox" checked="checked" class="checkbox">
          </label>
          <div class="description">
            Проживание
          </div>
        </div>
      </div>
    </div>

  </div>

  <script>

  const balanceSum = document.querySelector(".balance_sum");
  // const arrivalSum = document.querySelector(".arrival_sum");
  const totalAmountSum = document.querySelector(".total_amount_sum");
  // const calculation = document.querySelectorAll(".calculation");
  const sum = document.querySelectorAll(".sum");
  const sumDetails = document.querySelectorAll(".sum_details");


  const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");

  for (const calculation of document.querySelectorAll('.calculation')) {

    const arrivalSum = document.querySelector(".arrival_sum");

    calculation.addEventListener('change', function ({
      target
    }) {
      let input = target.closest('input');
      if (input) {
        let all_sum = target.closest('.all_sum input');
        if (all_sum) target.closest('.summa').querySelectorAll('.number input').forEach(input => (input.checked = all_sum.checked))
        else if (target.checked) target.closest('.summa').querySelector('.all_sum input').checked = true;
        else target.closest('.summa').querySelector('.all_sum input').checked = target.closest('.summa').querySelector('.number :checked')
      }
      let sum = 0;
      for (const div of calculation.querySelectorAll('.summa')) {
        const checked = div.querySelector('.all_sum input').checked;
        let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
          let input = label.querySelector('input');
          let up = + label.querySelector('.sum').textContent.replace(/\s/g, '');
          return input.checked ? n + up : n
        }
          , 0)
        div.querySelector('.all_sum .sum').textContent = digits(n);
        if (checked) sum += n
      }
      arrivalSum.textContent = digits(sum);
    })
    let event = new Event("change");
    calculation.dispatchEvent(event);
  }

  </script>
</body>

</html>


Почему сумма не возвращается когда поставил галочку?
Ответить с цитированием