Javascript проверяет, был ли введен какой-либо текст при отправке формы, просто не работает

#javascript

#javascript

Вопрос:

Я знаю, что это очень простой вопрос JS, и я прошу прощения. Я очень новичок в этом. Должно быть, я где-то допускаю ошибку. Вот с чем я работаю:

HTML-форма

 <div class='nameinput'>Please enter your name:</div>
<input id='name1' placeholder='Name...' type='text'>
<input type='submit' value='Connect' class="submitForm">
</div>

  

Код Javascript

   function store() {
    name = $("input#name1").val();
  }

  function init() {
    $('.submitForm').on('click', function(){

  if (name === '') {
  alert("Please Enter Name");
  } 

  else  
      store();
      $(".login_page").animate({
        'opacity': '0' });

  

Я не уверен, чего мне здесь не хватает. name = $("input#name1").val(); Работает нормально, но, похоже, я не могу заставить if работать правильно. Может ли кто-нибудь любезно объяснить мою проблему здесь?

Ответ №1:

Переменная name находится undefined в области видимости. Вам нужно получить его при нажатии кнопки. Измените свой код на что-то вроде этого:

 function init() {
  $('.submitForm').on('click', function() {
    var name = $("#name1").val();

    if (name === '') {
      alert("Please Enter Name");
    }

    // rest of the code
}
  

Кроме того, вам не нужна функция store , если вы используете ее только для инициализации переменной name . Кроме того, селектор input#name1 можно упростить #name1 , поскольку все элементы на странице должны иметь уникальные идентификаторы.

Ответ №2:

Я все еще новичок и изучаю JavaScript во многих отношениях, так что не волнуйтесь.

Во-первых, вы всегда должны стараться максимально отладить проблему. Один из простых способов сделать это — просто ввести тестовые console.log() инструкции, распечатывающие соответствующие значения, чтобы вы 1) знали, что и когда запускается, и 2) с какими значениями они работают. Это избавит вас от множества подобных проблем.

Во-вторых, я считаю, что проблема в вашем операторе if ( if (name === '') { ). Вы должны посмотреть на это и спросить себя, почему это не работает? Ваше логическое сравнение написано неправильно? вы сравниваете правильные вещи? Какие значения вы сравниваете?

Ваша проблема: где name определено? Вы используете его в store() , но он появляется впервые init в этом if заявлении. Это не определено до этого.

Итак, в первый раз, когда он срабатывает, это не может быть правдой, и он переходит к else предложению, а затем store() срабатывает.

В этом случае вы потеряли область видимости; где определяются ваши переменные.

Самое простое решение — добавить еще один оператор для извлечения значения ввода, которое вы пытаетесь проверить, и убедиться, что оно не равно null / empty . Если на то пошло, я не думаю, что вам store() это вообще нужно, если у вас не было какой-то конкретной цели для этого.

Комментарии:

1. Да, я очень новичок в JS. Этот console.log() чрезвычайно полезен, жаль, что я не знал об этом раньше. Я расстроился и, должно быть, был потерян не по порядку, это имеет смысл. Я попробую ваши предложения и посмотрю, что я могу придумать. Очень признателен.