Показать сообщение отдельно
  #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>
Ответить с цитированием