Looking to link my HTML list to a JavaScript display in a similar way as shown in this gif: . Below is the HTML and JS code I have:
<label for="Villes-select">Choose a city:</label>
<select onchange="showCity()" ; name="Cities" id="Villes-select" > ;
<option value="">--Select an option--</option>
<option value="Paris">Paris</option>
<option value="Lyon">Lyon</option>
<option value="Geneva">Geneva</option>
</select>
<h1> <strong> Weather TP </strong> </h1>
<p> This site displays weather information of cities whenever you want it.</p>
<div class="flex">
<div class="city" id="Paris"> <h2> Paris </h2>
<p> -1°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/Paris.png" alt="image2" height="25" width="25"/> </p> </div>
<div class="city" id="Lyon"> <h2> Lyon </h2>
<p> 0°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunCloud.png" alt="image3" height="25" width="25"/> </p> </div>
<div class="city" id="Geneva"> <h2> Geneva </h2>
<p> 6°C <img src="C:/Users/Dell/Downloads/Icon HTML/Thermo.png" alt="image1" height="25" width="25"/> <img src="C:/Users/Dell/Downloads/Icon HTML/SunIcon.png" alt="image4" height="25" width="25"/> </p> </div>
</div>
function showCity(){
var elements = document.querySelectorAll('.city');
for (var i=0 ; i< elements.length ; i++){
var element = elements[i];
}
let selectedCity = document.getElementById('Villes-select');
let cities = document.getElementsByClassName('city');
for(var i=0; i < 1 ; ++i){
if(cities[i]= selectedCity){
element.style.display= "none";
}
else{
element.style.display= "";
}
}
}