ID隐藏的JavaScript隐藏和显示元素无法在多种情况下使用_JavaScript

我真的不知道任何JavaScript，但是我已经能够拼凑一种方法，以编程方式在网页上使用以下行的版本隐藏html表，以在页面打开时将其隐藏：

document.getElementById("approved").style.display = "none";

等等

然后根据从选择菜单中选择的值，使用以下方法显示元素：

document.getElementById('cboaim').addEventListener('change', function (){
var style = this.value == "10" ? 'block' : 'none';
document.getElementById('approved').style.display = style;
var style = this.value == "13" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
var style = this.value == "14" ? 'block' : 'none';
document.getElementById('tortm').style.display = style;
var style = this.value == "17" ? 'block' : 'none';
document.getElementById('enddate').style.display = style;
});

除了与“ enddate”有关的两行外，它几乎适用于所有内容。 它适用于其中一个值，但不适用于其他值。 我假设两次引用元素ID都会破坏此代码（选择13和17都需要显示此日期框）。

由于更复杂的原因，我不能只添加另一个具有不同ID的表，所以我希望有人知道解决该问题的简便方法。 请对我温柔些，我知道javascript可能对程序员不利；-)

如果更简单，我也很乐意使用一个附加到onchange上的函数？ 我只使用addeventlistener，因为针对该特定解决方案进行了关于stackoverflow的搜索。

欢呼声

删除所有那些var语句。 在同一作用域中多次声明相同的var是无效的JS。

现在，对值"17"的检查将始终覆盖对"13" ，更改'enddate'元素上的条件：

document.getElementById('cboaim').addEventListener('change', function (){
    document.getElementById('approved').style.display = 
        this.value == "10" ? 'block' : 'none';

    document.getElementById('tortm').style.display = 
        this.value == "14" ? 'block' : 'none';

    document.getElementById('enddate').style.display = 
        (this.value == "13" || this.value == "17") ? 'block' : 'none';
});

如果值为"13" 或 "17"则将设置显示'enddate' 。

~~您不能有两个具有相同ID的元素，因为ID是唯一的标识符。~~ ~~您必须找到一种为表分配单独ID的方法。~~

~~如果您想做这样的事情，您可以给他们取相同的名字（或类），然后做这样的事情：~~

 
 
 
   
  
  
    var style = this.value == "13" ? 'block' : 'none'; document.getElementsByName('enddate')[0].style.display = style; //First enddate element style = this.value == "17" ? 'block' : 'none'; document.getElementsByName('enddate')[1].style.display = style; //Second enddate element

另外，每次编写var style = ...您都在定义一个新变量。 与上面类似，变量实际上不应具有相同的名称。 因此，您应该给他们使用不同的名称，或者从第一个名称中删除var关键字。

编辑：

我刚刚意识到问题并不像我想的那么清楚：您可能是说，如果从菜单中选择了13或17，那么样式是否不总是应用于单个元素？

在这种情况下，您需要一个if语句来确定是否选择了13 OR 17，并应用正确的样式。 例如：

 if((this.value == "17")||(this.value == "13")) { document.getElementById('enddate').style.display = "block"; } else { document.getElementById('enddate').style.display = "none"; }

您的代码的问题在于，对17的检查是分别进行的，而对13的检查则将覆盖该样式。 因此，当选择13时没有任何反应。

ID隐藏的JavaScript隐藏和显示元素无法在多种情况下使用

问题描述

1楼

2楼