当我在布尔值中添加一个切换时，我的函数停止工作。为什么？

Question

我的功能 Submit 工作正常，我的 else if 正在发出警报，但是当我尝试用功能切换替换该警报以隐藏第一步并显示我的测验的第二步时，它被阻止了。

我的 HTML 代码

  <div id="registration" class="container">
        <h2>Welcome to Badoo quiz</h2>
        <div class="main">
          <form class="form" method="post" action="#">
            <input type="text" id="name" placeholder="Name">
            <input type="text" id="lastName" placeholder="Last name">
            <input type="text" id="email" placeholder="Email">
            <input type="checkbox" id="agreed"> Email Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <button id="register" value="Register">Register</button>
          </form>
        </div>
      </div>

我的 CSS 代码，我确保我的第一步注册 ID 设置为阻止，而测验的其他步骤显示为：无。

#rule, #quizContainer, #final {
  display: none;
}

#registration {
  display: block;
}

我的 JS 代码，我创建了一个隐藏和显示的函数，以便我可以在以后的步骤中重新应用它们。

$(document).ready(function() {
  // toggle
  function hide(x){
    if (x.style.display === "block") {
        x.style.display = "none";
    }
  };

  function show(y){
    if (y.style.display === "none") {
        y.style.display = "block";
    }
  };

  //SIGN UP//
  function signUp() {
    var name = document.getElementById('name').value;
    var lastName = document.getElementById('lastName').value;
    var email = document.getElementById('email').value;
    var agreed = document.getElementById('agreed');
    var registration = document.getElementById('registration');
    var rule = document.getElementById('rule');
    var x = registration;
    var y = rule;
      if (name === '' || lastName === '' || email === '' ) {
        alert("Please fill all fields.");
      } else if (agreed.checked === true) {
        hide(x);
      } else {
        alert ("Tick the box please!");
      }
    };
document.getElementById('register').onclick = function () {
  signUp()
};
});

Answer 1

看看您的代码中的以下条件语句：

if (x.style.display === "block") {
    x.style.display = "none";
}

使用element.style.property === "value" 仅测试内联样式的值，这意味着直接包含在 HTML 中的样式具有样式属性或使用 JavaScript 添加的样式。

由于您的显示属性是用 CSS 设置的，因此内联值为空，条件返回 false。

要测试使用 CSS 设置的样式，请改用：

getComputedStyle(x).display === "block"

如果您更喜欢仍然使用x.style.display === "block" 作为条件语句，那么您可以将样式直接放在 HTML 中。然而，这被认为是不好的做法，因为它会减少关注点分离并使您的代码更难维护。

您还可以通过 JavaScript 设置样式，方法是在您的就绪事件回调函数的顶部添加如下内容：

var registration = document.getElementById('registration');
var x = registration;
x.style.display = "block";

注意：任何一种方法都可以让您的布尔切换正常工作。