Сообщение от 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>