I broke the whole application into components. And the problem is that I need to select an option in one component and use it (display, for example) in another component. Of course, the value could be changed anytime so the diplay component should have the lates one.

select component

const selectTemplate = (state) => `
    <input list="currecyList" id="selects" placeholder="USD">
    <datalist id="currecyList">
        ${state.list}
    </datalist>
`;

script file for the select component

let value;
const inp = document.querySelector("#selects");
inp.addEventListener("change", (event) => {
    console.log(event.target.value);
    value = event.target.value;
});

display component

const displayTemplate = (state) => `
  <header>
    <h1>
      <a href="#/posts">${state.currency}'s Blog</a>
    </h1>
  </header>
`;