Перемножить инпуты (но на выходе 3 резальтата)
Приветствую!
В очередной раз обращаюсь к сообществу за помощью по JS. Ситуация такая: есть два inputa, у одного есть только атрибут name, у другого есть name и id (присвоить id первому input нет возможности). Эти два input необходимо умножить друг на друга и получить три результата. Почему три? Сейчас постараюсь объяснить на примере. Рассмотрим на примере... допустим, "Аренда машин": первый input - это Mercedes (пусть name у него будет car), а второй input (пусть id у него будет price) - это стоимость аренды. Нужно одновременно получить 3 результата: стоимость аренды на 1 день, стоимость аренды на 1 месяц и стоимость аренды на 1 год. Буду благодарен если поможете :) |
Цитата:
Цитата:
<form>
<input type="text" name="car" value="Mercedes"/>
<input type="number" min="1" step="1" name="price-per-day" value="100"/>
<div>
Car rent:
<br/>
day: <span data-price-container="day"></span>
<br/>
month: <span data-price-container="month"></span>
<br/>
year: <span data-price-container="year"></span>
<br/>
</div>
</form>
<script>
(node => {
node?.addEventListener('input', e => {
const price = +e.target.value.trim() || 0;
[
{
period: 'day',
multiplier: 1,
},
{
period: 'month',
multiplier: 30,
},
{
period: 'year',
multiplier: 365,
}
].forEach(({
period,
multiplier
}) => {
const value = (price * multiplier).toLocaleString("en-US", {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 0,
});
document.querySelectorAll(`[data-price-container="${period}"]`).forEach(node => {
node.textContent = value;
});
});
});
node.dispatchEvent(new Event('input'));
})(document.querySelector('input[name="price-per-day"]'));
</script>
|
Nexus, изначально и было в планах сделать селектом, но пришлось использовать инпуты для каcтомной стилизации выпадающего списка.
P..S. Благодарю за помощь :) |
| Часовой пояс GMT +3, время: 03:52. |