时间戳

首页 > 解决方案 > 显示不隐藏

javascript - 显示不隐藏

问题描述

问题是函数中的某些东西不起作用，我找到的 html 元素（get elementByClass）和 addeventListener 也起作用，所以我想知道为什么不起作用，可能是“formSection.style.display = “堵塞”;” 因为它不是识别代码。

let state = {
  menu: false,
};

let formSection = document.getElementsByClassName("form");
let formButton = document.getElementsByClassName("buttonMenu");

formButton[0].addEventListener("click", clickMenu);

function clickMenu() {
  if (state.menu == false) {
    formSection.style.display = "block";
    state.menu = true;
  } else {
    formSection.style.display = "none";
    state.menu = false;
  }
}
<button class="buttonMenu">HIDE BUTTON</button>
<div class="form">
  <form id="registration-form" method="POST" action="MAILTO:@gmail.com" enctype="text/plain">
    <label class="label-form" for="email">Direccion de Correo:</label>
    <input type="text" class="form-input" id="email" name="email" placeholder="Su correo electronico" />

    <label class="label-form" for="name">Nombre:</label>
    <input type="text" class="form-input" id="name" name="name" placeholder="Su nombre" />

    <label class="label-form" for="lastname">Apellido:</label>

    <input type="text" class="form-input" id="lastname" name="lastname" placeholder="Su apellido" />

    <label class="label-form" for="telephone">Telefono:</label>
    <input type="text" class="form-input" id="telephone" name="telephone" placeholder="Su telefono" />

    <button type="submit">Enviar Comentario!!</button>
  </form>
</div>

标签： javascripthtmlfunction

解决方案

几件事

  • 您的表单选择器获得了一个集合，但为什么不使用表单 ID
  • 切换一个类要简单得多——为了方便和可读性，使用三元运算符
  • 让我们也改变按钮的文本

let formSection = document.getElementById("registration-form");
let formButton = document.querySelector(".buttonMenu"); // simpler than addressing an HTML collection

formButton.addEventListener("click", clickMenu);

function clickMenu() {
  formSection.classList.toggle("hide");
  formButton.textContent = formSection.classList.contains("hide") ? "SHOW FORM" : "HIDE FORM"
}
.hide { display:none }
<button class="buttonMenu">HIDE FORM</button>
<div class="form">
  <form id="registration-form" method="POST" action="MAILTO:@gmail.com" enctype="text/plain">
    <label class="label-form" for="email">Direccion de Correo:</label>
    <input type="text" class="form-input" id="email" name="email" placeholder="Su correo electronico" />

    <label class="label-form" for="name">Nombre:</label>
    <input type="text" class="form-input" id="name" name="name" placeholder="Su nombre" />

    <label class="label-form" for="lastname">Apellido:</label>

    <input type="text" class="form-input" id="lastname" name="lastname" placeholder="Su apellido" />

    <label class="label-form" for="telephone">Telefono:</label>
    <input type="text" class="form-input" id="telephone" name="telephone" placeholder="Su telefono" />

    <button type="submit">Enviar Comentario!!</button>
  </form>
</div>

推荐阅读