Question

我的功能Submit正常运行，否则我的其他功能正在执行警报，但是当我尝试使用功能切换替换该警报以隐藏第一步并显示我的测验的第二步时，它正在阻塞。

我的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设置为block，将测验的其他步骤设置为display：无。

#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";

注意：这两种方法都可以使您的布尔切换功能正常工作。

在布尔中添加切换后，函数停止工作。为什么？

1 个答案: