Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.03.2024, 23:01
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 106

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

Последний раз редактировалось samdo, 01.03.2024 в 23:20.
Ответить с цитированием
  #2 (permalink)  
Старый 02.03.2024, 03:43
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 02.03.2024, 11:24
Кандидат Javascript-наук
Отправить личное сообщение для samdo Посмотреть профиль Найти все сообщения от samdo
 
Регистрация: 27.05.2017
Сообщений: 106

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

Последний раз редактировалось samdo, 02.03.2024 в 11:43.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно склонировать блок, если инпуты в блоке находится в фокусе kos0760 Элементы интерфейса 3 03.12.2019 23:08
перемножить 2 числа а потом сложить js djonA Общие вопросы Javascript 20 24.06.2013 22:29
Центрирование Div-а ч2 alex2012 jQuery 0 15.11.2012 19:01
Получить все инпуты по заданоой маске nws Общие вопросы Javascript 2 09.09.2009 01:46
все инпуты формы remitmaster Общие вопросы Javascript 2 20.09.2008 03:13