为什么我的函数在按钮中的onClick事件上只能运行一次？

Question

I've searched, but could't find a solution to my problem. I'm not an JS expert, just a novice, but I can't figure out why this works only once. I have a SELECT droplist and I wanted to execute different instructions on different option selected.

I have 4 html blocks of text, only 1 is visible (display:block), the others are hidden (display:none). What I want to achieve here is to show only the selected block and hide the others, when I click the button.

Here's the code I've got:

 function filter() { if (document.getElementById('dynamic_select').value == 'opt1') { document.getElementById('html_block_1').style.display = 'block'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt2') { document.getElementById('html_block_2').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt3') { document.getElementById('html_block_3').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt4') { document.getElementById('html_block_4').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; } } 

 <select id="dynamic_select"> <option value="opt1">Display html block 1</option> <option value="opt2">Display html block 2</option> <option value="opt3">Display html block 3</option> <option value="opt4">Display html block 4</option> </select> <button onClick="filter()">Filter</button> 

When I select one of options and click the button, it works as it supposed to. But when I select other option and click the button for the second time - it does nothing. The function executes only once.

Is there a simple way to fix it?

Answer 1

Not quite related to the problem at hand, but if you change the values in the listbox to 1 to 4 you could simplify your filter function like

function filter()
{
    let value = document.getElementById('dynamic_select').value;

    for (i = 1; i < 5; i++)
    {
        let id      = 'html_block_' + i;
        let display = i == value ? 'block' : 'none';
        document.getElementById( id ).style.display = display;
    }
}

Answer 2

The code is working as expected. Try this. I created blocks with the given Ids. We can always optimize this though.

function filter() {
if (document.getElementById('dynamic_select').value == 'opt1'){
   document.getElementById('html_block_1').style.display = 'block';
   document.getElementById('html_block_2').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
else if (document.getElementById('dynamic_select').value == 'opt2'){
   document.getElementById('html_block_2').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_3').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
else if (document.getElementById('dynamic_select').value == 'opt3'){
   document.getElementById('html_block_3').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_4').style.display = 'none';
   }
 else {
   document.getElementById('html_block_4').style.display = 'block';
   document.getElementById('html_block_1').style.display = 'none';
   document.getElementById('html_block_2').style.display = 'none';           
   document.getElementById('html_block_3').style.display = 'none';
   }
}
</script>

Answer 3

This should work. There's something else that's preventing your event to happen. If your filter function is in some custom js file, shift the function in your HTML file itself where you have your dropdown HTML code. Then try running it. Also put this console just after your filter function opening

console.log(document.getElementById('dynamic_select').value)

Also check this error in the console --> Cannot read property 'style' of null. Seems like your "html_block_index" element is not present in the DOM.

Answer 4

Here is the updated snippet: Please check the below, It works as expected

 function filter() { if (document.getElementById('dynamic_select').value == 'opt1') { document.getElementById('html_block_1').style.display = 'block'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt2') { document.getElementById('html_block_2').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt3') { document.getElementById('html_block_3').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_4').style.display = 'none'; } if (document.getElementById('dynamic_select').value == 'opt4') { document.getElementById('html_block_4').style.display = 'block'; document.getElementById('html_block_1').style.display = 'none'; document.getElementById('html_block_2').style.display = 'none'; document.getElementById('html_block_3').style.display = 'none'; } } 

 <select id="dynamic_select"> <option value="opt1">Display html block 1</option> <option value="opt2">Display html block 2</option> <option value="opt3">Display html block 3</option> <option value="opt4">Display html block 4</option> </select> <button onClick="filter()">Filter</button> <div id="html_block_1">Block 1</div> <div id="html_block_2">Block 2</div> <div id="html_block_3">Block 3</div> <div id="html_block_4">Block 4</div>