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

【问题标题】：Why does my function runs only once on onClick event in button?为什么我的函数只在按钮中的 onClick 事件上运行一次？
【发布时间】：2019-09-04 09:59:08
【问题描述】：

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

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

这是我得到的代码：

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>

当我选择一个选项并单击按钮时，它会按预期工作。但是当我选择其他选项并第二次单击该按钮时 - 它什么也不做。该函数只执行一次。

有什么简单的方法可以解决吗？

【问题讨论】：

if (document.getElementById('dynamic_select').value == 'opt4'){... 位于您的 filter 函数之外
您的代码在控制台中抛出错误。有一个无与伦比的}
抱歉，打错了。一}太多了。但是在原始代码中这不是问题，它仍然无法正常工作。
请同时添加 html 块。
没有错字对我有用，检查this JSFiddle

标签： javascript function if-statement onclick

【解决方案1】：

与手头的问题不太相关，但如果您将列表框中的值更改为 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;
    }
}

【讨论】：

【解决方案2】：

代码按预期工作。试试这个。我用给定的 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>

【讨论】：

【解决方案3】：

这应该可以。还有其他事情阻止您的活动发生。如果您的过滤器函数位于某个自定义 js 文件中，请将该函数移到您的 HTML 文件本身中，其中您有下拉 HTML 代码。然后尝试运行它。也将这个控制台放在你的过滤器功能打开之后

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

还要在控制台中检查此错误 --> 无法读取 null 的属性“样式”。似乎您的“html_block_index”元素不存在于 DOM 中。

【讨论】：

我已经添加了 console.log，这太疯狂了。当我选择 opt1 时，它可以工作并且控制台显示 opt1，但是，当我选择任何其他选项并单击按钮时，无论我选择什么，控制台都会继续显示 opt1。
您确定选择中的值实际上是“opt1”..“opt4”吗？如果它们都是“opt1”（可能是复制和粘贴），那将显示所描述的行为。
不，事实并非如此。所有选项都有不同的值。

【解决方案4】：

这是更新后的 sn-p：请检查以下内容，它按预期工作

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>

【讨论】：