This has probably been asked about before, but after several hours of looking I can't seem to find anything.
I have a datalist which is meant to display a div based on your selection of the datalist. Whatever I do, I can't seem to find out how to do it. The best I can get to work is have both selections display one of the divs, but not have spesific divs display based on the selection.
How do I make it so choosing div1 display div1, div2 displays div2 and so on?
var myinput = document.getElementById('example');
myinput.addEventListener("change", function() {
var mydiv = document.getElementById('#div');
mydiv.style.display = (this.value === '' ? 'none' : 'inline');
});
.hidden {
display: none;
}<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow" />
<datalist id="brow">
<option value="div1" />
<option value="div2" />
</datalist>
</fieldset>
<div class="hidden" id="div1">This is div1></div>
<div class="hidden" id="div2">This is div2></div>your script will be like this.
var myinput = document.getElementById('example');
var divs = document.querySelectorAll('.hidden');
myinput.addEventListener('change', function() {
var mydiv = document.getElementById(this.value);
divs.forEach(div => {
div.style.display = div.id === this.value ? 'block' : 'none';
});
});.hidden {
display: none;
}<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow" />
<datalist id="brow">
<option value="div1" />
<option value="div2" />
</datalist>
</fieldset>
<div class="hidden" id="div1">This is div1></div>
<div class="hidden" id="div2">This is div2></div>If you have a selected element, remove .hidden to show it.
Else, search for the div that doesn't have .hidden and add back the class to hide it.
document.getElementById('example').addEventListener("change", () => {
if(event.target.value){
document.getElementById(event.target.value).classList.remove("hidden");
}
else{
document.querySelector(".somediv:not(.hidden)").classList.add("hidden");
}
});.hidden {
display: none;
}<fieldset>
<legend>This is a datalist</legend>
<input type="text" id="example" list="brow"/>
<datalist id="brow">
<option value="div1"/>
<option value="div2"/>
</datalist>
</fieldset>
<div class="somediv hidden" id="div1">This is div1</div>
<div class="somediv hidden" id="div2">This is div2</div>