javascript - 类型错误 : - is not a function

Question

我有这个表单，它应该隐藏另一个表单:

  <!--checkbox-->
  <form method="POST" action="start.inc.php">
      <span id="switch"><!--these are for css, the input matters-->
          <label>
              <input id="hide" name="hide" type="checkbox" onclick="hide()" /><!--error here-->
              <span class="slider"></span>
          </label>
          <label for="hide">Do not set a password</label>
      </span>
  </form>

  <!--this should be hidden-->
  <form method="POST" action="start.inc.php">
      <!--form stuff-->
    <button type="submit" name="check">Set Password</button>
  </form>

所以我实现了这样的功能:

function hide() {
    var checkBox = document.getElementById("hide");
    var form =  document.getElementsByTagName("form")[1];

    if (checkBox.checked == true)
    {
        form.style.display = "none";
    } else {
        form.style.display = "block";
    }
}

它写在html之前，但即使改变它们的顺序也没有改变......

问题是，当我单击复选框时，表单不会消失，并且在控制台上出现以下错误: (index):93 Uncaught TypeError: hide 不是函数 在 HTMLInputElement.onclick

注意:我是 JS 的初学者，所以如果这是一个愚蠢的错误，请不要责骂我

谢谢

Answer 1

问题在于函数的名称与元素的 ID 相同。元素 ID 成为全局变量，因此 hide是<input>元素而不是函数。实现这一点的关键是错误消息没有说 hide未定义，它表示它不是一个函数——这意味着它是其他东西(在本例中是一个 DOM 元素)。

为函数指定一个与任何元素 ID 不同的名称，它将起作用。