Я хочу сделать так, чтобы при нажатии на элемент опции из списка появлялась картинка с визуальным обозначением валюты

Я хочу сделать так, чтобы при нажатии на элемент опции из списка появлялась картинка с визуальным обозначением валюты. Но сейчас у меня недостаточно знаний для этого.

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


Ответы (0 шт):