Я хочу сделать так, чтобы при нажатии на элемент опции из списка появлялась картинка с визуальным обозначением валюты
Я хочу сделать так, чтобы при нажатии на элемент опции из списка появлялась картинка с визуальным обозначением валюты. Но сейчас у меня недостаточно знаний для этого.
window.addEventListener('load', () => {
const currency = {
USD: 78,
EUR: 85.60,
RUB: 1
};
const state = [0, 'USD', 'USD'];
const result = document.getElementsByClassName('convert_result')[0]
document.getElementById('val')
.addEventListener('input', ({
target
}) => listener(target.value, 0))
document.getElementById('cur1')
.addEventListener('change', ({
target
}) => listener(target.value, 1))
document.getElementById('cur2')
.addEventListener('change', ({
target
}) => listener(target.value, 2))
const listener = (value, key) => {
state[key] = value;
result.innerHTML = summ(...state)
}
function summ(val, cur1, cur2) {
let z = 0;
if (cur1 === cur2) {
return val;
} else {
if (cur1 != 'RUB') {
z = val * currency[cur1];
return Math.ceil((z / currency[cur2]) * 100) / 100;
} else {
return Math.ceil((val * currency[cur2]) * 100) / 100;
}
}
}
})
<div class="convert_block_item">
<input type="number" id="val" placeholder="enter the amount..." />
<select id="cur1">
<option>USD</option>
<option>EUR</option>
<option>RUB</option>
</select>
</div>
<div class="convert_block_item">
<div class="convert_result">= 00,000</div>
<select id="cur2">
<option>USD</option>
<option>EUR</option>
<option>RUB</option>
</select>
</div>
P.S. стили css сейчас для меня не важны. Я хочу выяснить, как это должно работать на чистом html