Перемножить инпуты (но на выходе 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, время: 08:20. |