Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Перемножить инпуты (https://javascript.ru/forum/misc/85777-peremnozhit-inputy.html)

samdo 01.03.2024 23:01

Перемножить инпуты (но на выходе 3 резальтата)
 
Приветствую!
В очередной раз обращаюсь к сообществу за помощью по JS.
Ситуация такая: есть два inputa, у одного есть только атрибут name, у другого есть name и id (присвоить id первому input нет возможности).
Эти два input необходимо умножить друг на друга и получить три результата. Почему три? Сейчас постараюсь объяснить на примере. Рассмотрим на примере... допустим, "Аренда машин":
первый input - это Mercedes (пусть name у него будет car), а второй input (пусть id у него будет price) - это стоимость аренды.
Нужно одновременно получить 3 результата: стоимость аренды на 1 день, стоимость аренды на 1 месяц и стоимость аренды на 1 год.
Буду благодарен если поможете :)

Nexus 02.03.2024 03:43

Цитата:

Сообщение от samdo
присвоить id первому input нет возможности

Да и не нужно.

Цитата:

Сообщение от samdo
первый input - это Mercedes (пусть name у него будет car)

Очень странный выбор тега, для хранения «selectable» данных, разве select не лучше для этого подойдет?

<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>

samdo 02.03.2024 11:24

Nexus, изначально и было в планах сделать селектом, но пришлось использовать инпуты для каcтомной стилизации выпадающего списка.
P..S. Благодарю за помощь :)


Часовой пояс GMT +3, время: 08:20.