javascript - 显示/隐藏表格不起作用

Question

我正在尝试创建一个按钮，当您单击它时，它会显示一个小框，其中包含新闻通讯注册表单。

我已经编写了我的 JavaScript，但它似乎不起作用。

如果您能给我任何关于为什么这不起作用的指示，我将不胜感激。

<script>
  function setVisibility('subscribe_form') {
     if (document.getElementById('bt1').value == 'Hide Layer') {
       document.getElementById('bt1').value = 'Show Layer';
       document.getElementById('subscribe_form').style.display = 'none';
     } else {
       document.getElementById('bt1').value = 'Hide Layer';
       document.getElementById('subscribe_form').style.display = 'block';
     }
   }
</script>

---

 <input type='button' name='type' id='bt1' value='Show Layer' onclick="setVisibility('subscribe_form');";>           
 <form action="%%GLOBAL_ShopPath%%/subscribe.php" method="post" id="subscribe_form" class="subscribe_form" name="subscribe_form">

Answer 1

您在函数声明中应该有一个变量名 (subscribe_form) 的地方编写了一个字符串 ('subscribe_form')。那加上其他一些错别字(例如，输入标签中的 ;)会让您误入歧途。

你的 JavaScript console会有一些关于这些错误的消息。

工作版本:

function setVisibility(subscribe_form) {
  if (document.getElementById('bt1').value == 'Hide Layer') {
    document.getElementById('bt1').value = 'Show Layer';
    document.getElementById(subscribe_form).style.display = 'none';
  } else {
    document.getElementById('bt1').value = 'Hide Layer';
    document.getElementById(subscribe_form).style.display = 'block';
  }
}

<input type='button' name='type' id='bt1' value='Show Layer' onclick="setVisibility('subscribe_form');" />
<form action="%%GLOBAL_ShopPath%%/subscribe.php" method="post" id="subscribe_form" class="subscribe_form" name="subscribe_form" style="display:none">
  <p>subscribe form</p>
</form>