Почему я не могу заставить эту функцию работать правильно?

Question

У меня есть некоторый код во внешнем файле .js, который выглядит следующим образом:

function creditConfirm (){
 textboxVType = document.getElementById('textboxType');
 textboxVName= document.getElementById('textboxName');
 textboxVNumber = document.getElementById('textboxNumber');
 textboxVCode = document.getElementById('textboxCode');
 textboxVAmount = document.getElementById('textboxAmount');

 if (textboxVType && textboxVName && textboxVNumber && textboxVCode && textboxVAmount =! " "){
     alert("Accepted");
     //All items made null

 }
 else{
     alert("Try again");
 }
}

Тогда у меня также есть некоторый код HTML, который выглядит следующим образом:

<p1> Credit card type: </p1>

<input type = "text" id "textboxType">

<h1> </h1>

<p1> Name: </p1>

<input type = "text" id "textboxName">

<h1> </h1>

<p1> Number: </p1>

<input type = "text" id "textboxNumber">

<h1> </h1>

<p1> Security code: </p1>

<input type = "text" id "textboxCode">

<h1> </h1>

<p1> Donation amount: </p1>

<input type = "text" id "textboxAmount">

<button onclick="creditConfirm()">Confirm</button>  

То, что я пытаюсь сделать, - это если все элементы заполнены, чтобы напечатать первый текст, и если один из них отсутствует, распечатать второй текст и разрешить им повторить попытку.Однако, когда я захожу на сайт, либо заполняю все поля, либо оставляю один незаполненным и нажимаю кнопку подтверждения, ничего не происходит.Я нахожусь на очень базовом уровне JavaScript, и наш учитель, похоже, отказывается учить нас, поэтому я, возможно, только что пропустил действительно очевидную ошибку, может кто-нибудь заметить что-нибудь, что приведет к тому, что это не работает

Answer 1

Хотя я понимаю, что вы только начинаете с JS, и это может быть немного выше вашей зоны комфорта, вас может заинтересовать ярлык для записи и проверки всех значений входных идентификаторов отдельно:

Здесь мы выбираем все входные данные, используя querySelectorAll, а затем проверяем значение каждого из них с помощью some.Если какой-либо из них пуст, значит «Принят» оповещен, в противном случае попробуйте снова.

function creditConfirm() {
  const inputs = document.querySelectorAll('input');
  const emptyField = [...inputs].some(input => input.value === '');
  if (!emptyField) {
    alert("Accepted");
  } else {
    alert("Try again");
  }
}

Короткая демонстрация JSFiddle .

Answer 2

вы проверяете, верны ли элементы dom (это всегда будет верно, если вы объявите их в своем html), а не проверяете, установлено ли для них значение

измените свой if на

if (textboxVType.value && textboxVName.value && textboxVNumber.value 
   && textboxVCode.value && textboxVAmount.value){
     alert("Accepted");
 }

Answer 3

1) Оператор =! не существует. != делает.

2) textboxVType textboxVName textboxVNumber textboxVCode textboxVAmount =! " " - это 4 различных условия. Вы не можете разложить условие таким образом. Вместо этого вы должны написать таким образом textboxVType.value != " " && textboxVName.value != " " && textboxVNumber.value != " " && textboxVCode.value != " " && textboxVAmount.value != " " .value используется для доступа к значению полученных вами элементов DOM.

3) Если вы хотите проверить, является ли текстовое поле пустым, используйте != "" вместо != " " (это будет проверять только, содержит ли текстовое поле только пробел)

Answer 4

Вы неправильно проверяете элементы для значений в своем операторе if.

В операторе if, который имеет условия && (или ||),каждое условие должно быть выполнено и стоять самостоятельно.

Кроме того, чтобы проверить поле формы для данных, необходимо проверить его свойство value.

У вас также было =! вместо !=.

if(textboxVType.value !="" && 
   textboxVName.value != "" && 
   textboxVNumber.value !="" && 
   textboxVCode.value !="" && 
   textboxVAmount.value != "") {}