Display div based upon datalist selection

Question

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>

Answer 1

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>