style.display 为 null - 尝试遍历数组并更改显示属性答案

【问题标题】：style.display is null - trying to loop over array and change display propertystyle.display 为 null - 尝试遍历数组并更改显示属性
【发布时间】：2011-06-20 09:14:14
【问题描述】：

我的另一个新手问题。

只是检查我下面的代码是否可行。即创建一个由“document.GetElementById”组成的新数组。由于我对 javascript 比较陌生，所以我的代码通常有点冗长，所以请原谅其中的混乱。

下面的代码显示错误'style.display' is 'null' or not an object。任何人都可以看到任何明显的我遗漏或做错的事情吗？

function Test(){

if(document.getElementById('inClient').value !=="FormViewer"){

    var visible =new Array("document.getElementById('personal2').value","document.getElementById('change_hours2').value");
    var change = new Array("document.getElementById('personal').value","document.getElementById('change_hours').value");

    for (var i=0; i <visible.length; i++) {
        if(visible[i]!==""){
            change[i].style.display = "block"
         }
      }
   }
}

基本上，如果隐藏字段（'personal2' 等）为空白，我希望 div / 部分（'personal' 等）保持隐藏，但如果它包含文本，那么我想显示该部分。

提前致谢

【问题讨论】：

执行alert(change) 并查看数组包含的内容。它不包含 DOM 元素。 visible 也一样，它不包含 DOM 元素的值。

标签： javascript css for-loop show-hide

【解决方案1】：

您正在向数组添加字符串，而不是对 DOM 元素的引用。删除引号和 value 属性，它将起作用。您必须在迭代中检查value。

function Test(){

if(document.getElementById('inClient').value !=="FormViewer"){

    var visible =new Array(document.getElementById('personal2'), document.getElementById('change_hours2'));
    var change = new Array(document.getElementById('personal'), document.getElementById('change_hours'));

    for (var i=0; i <visible.length; i++) {
        if(visible[i].value != ""){
            change[i].style.display = "block"
         }
      }
   }
}

【讨论】：

非常感谢，这是我通常忽略的小事。当它允许我时会接受你的答案。
@MarkWalters：还有一件事，不要使用new Array，使用数组文字var visible = [..., ...];
@Felix Kling：不知道为什么我使用新的 Array。但是你能解释一下为什么我应该使用数组文字吗？
@Mark：Array 构造函数不明确。如果您只传递一个值，它将尝试将数组的长度设置为该值。如果您传递两个或更多值，它会将这些值添加到数组中。这很容易导致错误。数组字面量也更短。
感谢费利克斯的解释

【解决方案2】：

你应该这样使用，没有双引号，它应该可以工作。

 var visible =new Array(document.getElementById('personal2').value,document.getElementById('change_hours2').value);
    var change = new Array(document.getElementById('personal').value,document.getElementById('change_hours').value);

【讨论】：