Ошибка типа: - не является функцией

Question

У меня есть form, который должен скрывать другую форму:

  <!--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 is not a function at HTMLInputElement.onclick

Примечание: я новичок в JS, поэтому, пожалуйста, не обращайте на меня внимания, если это была глупая ошибка

спасибо

Answer 1

Проблема в том, что имя функции совпадает с идентификатором элемента. Идентификаторы элементов становятся глобальными переменными, поэтому hide является элементом <input>, а не функцией. Ключом к пониманию этого является то, что сообщение об ошибке не говорит о том, что hide не определено, оно говорит о том, что это не функция - это означает, что это что-то другое (в данном случае, элемент DOM).

Дайте функции имя, которое не совпадает с идентификатором любого элемента, и оно будет работать.