Event listener on datalist (html,css.javascript)

Question

I have created this datalist, when someone chooses an option I want there to be an image appearing. To be more exact the options are greek islands, so when someone chooses one of the islands a distinctive img of that island should appear. I do not know exactly what js code to use for that event to happen.

Επιλέξτε προορισμό:

user_12415287 · Answer

This will do what you're looking for:

function setImage(value) {
  var imgs = document.getElementsByTagName("img"); 
    for(var i = 0; i < imgs.length; i++){
      imgs[i].style.display = "none"; 
  }
  document.getElementById(value).style.display = 'block';
}

img {
  display: none;
}

Επιλέξτε προορισμό:

user_12160777 · Answer

Try this:

document.querySelector('input[list="epiloges"]').addEventListener('input', updateImage);

function updateImage(event) {
  const value = event.target.value

  // Do what you have to do with value
  console.log(value)
}

Επιλέξτε προορισμό:

You can than update or create an image based on the value. If you require help with that as well comment below.

user_4008454 · Answer

Here you can add onchange to input and fetch data from it.

function getImages(e) {
  var val = document.getElementById("browser").value;
  // here you can add fetch call
  const id = Math.ceil(Math.random() * 1000);
  fetch("https://jsonplaceholder.typicode.com/photos/"+id).then((response) => response.json()).then(data => renderImage(data.url));
}

function renderImage(url) {
  const el = document.getElementById("output");
  el.innerHTML = ``;
}

Choose your browser from the list:

Event listener on datalist (html,css.javascript)

3 Answers