数据列表上的事件监听器 (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.

<label for="epilogh-proorismou">Επιλέξτε προορισμό:</label>
<input list="epiloges" id="proorismoi" name="proorismoi" />
<datalist id="epiloges">
   <option value="Κρήτη">
   <option value="Σαντορίνη">
   <option value="Χίος">
   <option value="Πάρος">
   <option value="Κέρκυρα">
</datalist>
    

Answer 1

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; }

 <label for="epilogh-proorismou">Επιλέξτε προορισμό:</label> <input list="epiloges" id="proorismoi" onmousedown="this.value='';" onchange="setImage(this.value);" name="proorismoi" /> <datalist id="epiloges"> <option value="Κρήτη"> <option value="Σαντορίνη"> <option value="Χίος"> <option value="Πάρος"> <option value="Κέρκυρα"> </datalist> <img id="Κρήτη" src="" alt="Κρήτη"></img> <img id="Σαντορίνη" src="" alt="Σαντορίνη"></img> <img id="Χίος" src="" alt="Χίος"></img> <img id="Πάρος" src="" alt="Πάρος"></img> <img id="Κέρκυρα" src="" alt="Κέρκυρα"></img>

Answer 2

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) }

 <label for="epilogh-proorismou">Επιλέξτε προορισμό:</label> <input list="epiloges" id="proorismoi" name="proorismoi" /> <datalist id="epiloges"> <option value="Κρήτη"> <option value="Σαντορίνη"> <option value="Χίος"> <option value="Πάρος"> <option value="Κέρκυρα"> </datalist>

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

Answer 3

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 = `<img src='${url}' width=90 height=90>`; }

 <label for="browser">Choose your browser from the list:</label> <input list="browsers" name="browser" id="browser" onchange="getImages()"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <div id="output"> </div>