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

我已经找过了，但找不到解决问题的办法。我不是一个JS专家，只是一个新手，但我不明白为什么这只能工作一次。 我有一个选择液滴列表，我想在选择的不同选项上执行不同的指令

我有4个html文本块，只有1个是可见显示：块，其他是隐藏显示：无。我想在这里实现的是，当我单击按钮时，仅显示选定的块并隐藏其他块

以下是我得到的代码：

函数滤波器{ 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } } 显示html块1 显示html块2 显示html块3 显示html块4

---

过滤器代码按预期工作。试试这个。我用给定的ID创建了块。不过，我们始终可以对此进行优化

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>

---

这应该行得通。还有一些事情阻止了你的事件发生。如果您的过滤器函数位于某个自定义js文件中，请将该函数移到HTML文件本身的下拉HTML代码处。然后试着运行它。同样，在过滤器功能打开后放置此控制台

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

---

还要在控制台->无法读取null的属性“style”中检查此错误。看起来您的html\u块\u索引元素不在DOM中

与当前的问题关系不大，但如果将列表框中的值更改为1到4，则可以简化筛选函数，如

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

---

以下是更新的代码段： 请检查下面的选项，它可以正常工作

函数滤波器{ 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } 如果document.getElementById'dynamic_select'。值=='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'； } } 显示html块1 显示html块2 显示html块3 显示html块4 滤器 第一区 第2区 第3区

---

块4如果document.getElementById'dynamic_select'。value=='opt4'{…被放置在您的筛选函数之外您的代码在控制台中抛出错误。有一个不匹配的}抱歉，这是一个输入错误。太多了。但在原始代码中，这不是问题，它仍然不起作用。请同时添加html块。如果没有输入错误，请检查我是否添加了console.log，这太疯狂了。当我选择opt1时，它会工作，控制台会显示opt1，但是当我选择任何其他选项并单击按钮时，无论我选择什么，控制台都会显示opt1。您确定select中的值实际上是opt1吗。。opt4？如果它们都是opt1复制粘贴，那么可能会显示行为描述

---

伊贝德，不是这样的。所有选项都有不同的值。