Ответы пользователя Kirito Kirigaya по тегу «JavaScript»

Почему localStorage.getItem(key) отрабатывает только после второго клика?

Kirito Kirigaya @ae_ph

Я исправил данный кода, теперь это должно работать для вас.
Вот пример на CodePen
Тот-же код, что и на codepen...

HTML

<div class="container">
  <div class="cart">
    <input class="input amount-one" type="text" value="0" />
    <input class="input amount-two" type="text" value="0" />
    <input class="input amount-three" type="text" value="0" />
    <button class="btn">click</button>
  </div>
  <div class="cart">
    <input class="input amount-one" type="text" value="0" />
    <input class="input amount-two" type="text" value="0" />
    <input class="input amount-three" type="text" value="0" />
    <button class="btn">click</button>
  </div>
  <div class="box">
    <input id="clear" type="button" value="clear all" />
    <div class="info"></div>
  </div>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  background-color: #1d1e22;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cart {
  display: flex;
  flex-direction: column;
  margin: 20px;
}
.input {
  padding-left: 20px;
  height: 20px;
  margin-bottom: 5px;
  font-size: 20px;
  border-radius: 10px;
}
.btn {
  height: 30px;
  font-size: 20px;
  border-radius: 10px;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}
#clear {
  width: 100px;
  height: 40px;
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 10px;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 30px;
  border: 2px solid #bbb;
  background-color: #fff;
}

JavaScript

let currentTariff = JSON.parse(localStorage.getItem('cabins') || '[]');
const passengersMax = 3; // Максимальное количество пассажиров
let accommodationSum = currentTariff.reduce((acc, curr) => acc + curr.accommodation, 0);
const btn = document.querySelectorAll('.btn');
const info = document.querySelector('.info');

// Вывести текущие тарифные данные в информационный блок
const render = (tariff = currentTariff) => {
  [...tariff].forEach(el => {
    info.insertAdjacentHTML('beforeend', `<div>${el.accommodation}</div>`);
  });
};
render();

btn.forEach(button => {
  button.addEventListener('click', function (e) {
    const cart = e.target.closest('.cart');
    const countOne = cart.querySelector('.amount-one').value;
    const countTwo = cart.querySelector('.amount-two').value;
    const countThree = cart.querySelector('.amount-three').value;
    const accommodationPass = parseInt(countOne) + parseInt(countTwo) + parseInt(countThree);

    if (accommodationSum + accommodationPass > passengersMax) {
      alert('В этом заказе вы превысили максимальное количество человек');
      return;
    }

    const obj = {
      countOne: countOne,
      countTwo: countTwo,
      countThree: countThree,
      accommodation: parseInt(accommodationPass),
    };

    // Обновляем текущий тариф и отображаем новые данные
    currentTariff.push(obj);
    updateState();

    const sum = currentTariff.reduce((acc, curr) => acc + curr.accommodation, 0);
    info.innerHTML = `<div>Общая сумма: ${sum}</div>`;

    accommodationSum = sum; // Устанавливаем сумму размещения на текущую сумму
  });

  function updateState() {
    localStorage.setItem('cabins', JSON.stringify(currentTariff));
  }
  // Очищаем входы и информационный блок при нажатии кнопки "clear all"
function clearData() {
    currentTariff.length = 0;
    localStorage.removeItem('cabins');
    info.innerHTML = '';
    const inputs = document.querySelectorAll('input[type="text"]');
    inputs.forEach(input => {
      input.value = 0;
    });
    accommodationSum = 0;  // Сбрасываем сумму размещения до 0
}

  const clearBtn = document.querySelector('input#clear');
  clearBtn.addEventListener('click', clearData);
});

Ответ написан более двух лет назад

10 комментариев

Как отформатировать код в HTML?

Kirito Kirigaya @ae_ph Автор вопроса

Собственно на самом сайте css-tricks я и нашёл решение )
Возможно у вас есть свои варианты, когда не используется CMS WordPress

Ответ написан более двух лет назад

Комментировать

Как реализовать видеоплеер с уменьшением длины видео (обрезка)?

Kirito Kirigaya @ae_ph

Думаю вам нужно смотреть в эту сторону: Управление видео из JavaScript.
ссылка 1
ссылка 2
А если вы хотите обрезать видео прямо в браузере по таймлайну тогда тут можно на сервере использовать ffmpeg.
Но я не совсем уверен, чего именно вы хотите добиться.

Войдите на сайт