Моя функция перестала работать, когда я добавил переключатель в моем логическом.Зачем? - PullRequest
Новая
       16

Моя функция перестала работать, когда я добавил переключатель в моем логическом.Зачем?

0 голосов
/ 16 октября 2018

Моя функция Submit работает нормально, в противном случае else выполняет оповещение, но когда я пытаюсь заменить это оповещение, функция переключается, чтобы скрыть первый шаг и показать второй шаг моего теста, который он блокирует.

Мой код в 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, я убедился, что мой регистрационный идентификатор первого шага был заблокирован, а остальные шаги викторины с отображением: нет. 

#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()
};
});

1 Ответ

0 голосов
/ 16 октября 2018

Посмотрите на следующий условный оператор из вашего кода: 

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

Примечание: любой метод позволит вашему булевому переключению работать правильно.

...