添加第二个参数时，Javascript函数停止工作

我有以下单参数JS函数，它隐藏/显示html表，并在一个小异常下正常工作-我需要单击两次以显示所需的效果：

function toggle_visibility(id) 
    {
        var e = document.getElementById(id);
        if(e.style.display != 'none')
            e.style.display = 'none';
       else
          e.style.display = 'table';
    }

现在，当我添加第二个参数并扩展该函数以在两个img源路径之间切换时，它不再工作。Firebug控制台不提供任何错误消息或其他线索：

function toggle_visibility(id, arrow) 
    {
       var e = document.getElementById(id);
       var i = document.getElementById(arrow);
       if(e.style.display != 'none')
          e.style.display = 'none';
          i.src = 'img/arrowDownWhiteRight.bmp';
       else
          e.style.display = 'table';
          i.src = 'img/arrowDownWhite.bmp';
    }

我从中调用函数的html元素显示如下：

<tr id="trigger" class="toggle" onclick="toggle_visibility('collapsible1', 'img1')">

第二个参数的元素：

<td id="triggerArrow"><img id="img1" src="img/arrowDownWhiteRight.bmp"></td>

要隐藏/显示的元素（默认为“显示：无”）

...

您需要使用块：

function toggle_visibility(id, arrow) 
{
   var e = document.getElementById(id);
   var i = document.getElementById(arrow);
   if(e.style.display != 'none') {                 // <== {
      e.style.display = 'none';
      i.src = 'img/arrowDownWhiteRight.bmp';
   } else {                                        // <== } and {
      e.style.display = 'table';
      i.src = 'img/arrowDownWhite.bmp';
   }                                               // } <==
}

真是

if (condition)
    doThis();
doThat();

其中，添加块使两个调用都取决于条件：

if (condition) {
    doThis();
    doThat();   // Only happens if the condition is true now
}

{

和

}

的位置（在同一行上，在他们自己的行上，等等）完全取决于您，风格问题。我在上面的第一个代码块中显示的样式非常非常常见，但是根据您为函数放置

{

的位置，您可能更喜欢这种其他样式，这种样式也很常见（尽管在其他B派生语言中比在JavaScript中更常见）：

---

这两种方法都不重要，但都会做同样的事情。

如果要在If之后执行两条或更多语句，请使用大括号将它们分组：

function toggle_visibility(id, arrow){
  var e = document.getElementById(id);
  var i = document.getElementById(arrow);
  if(e.style.display != 'none'){
    e.style.display = 'none';
    i.src = 'img/arrowDownWhiteRight.bmp';
  } else{
    e.style.display = 'table';
    i.src = 'img/arrowDownWhite.bmp';
  }
}

if (condition) {
    doThis();
    doThat();   // Only happens if the condition is true now
}

function toggle_visibility(id, arrow) 
{
   var e = document.getElementById(id);
   var i = document.getElementById(arrow);
   if(e.style.display != 'none')
   {
      e.style.display = 'none';
      i.src = 'img/arrowDownWhiteRight.bmp';
   }
   else
   {
      e.style.display = 'table';
      i.src = 'img/arrowDownWhite.bmp';
   }
}

function toggle_visibility(id, arrow){
  var e = document.getElementById(id);
  var i = document.getElementById(arrow);
  if(e.style.display != 'none'){
    e.style.display = 'none';
    i.src = 'img/arrowDownWhiteRight.bmp';
  } else{
    e.style.display = 'table';
    i.src = 'img/arrowDownWhite.bmp';
  }
}