Why can't I seem to get this function to implement properly?

Question

I've got some code in an external .js file that goes like this:

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

Then I also have some HTML code that goes like this:

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

What I'm trying to do is if all the items are filled out to print the first text and if one is missing to print the second text and allow them to try again. However, when I go onto the website either fill out all the boxes or leave one unfilled and click the confirm button nothing happens. I'm at a very basic level of JavaScript and our teacher seemingly refuses to teach us so I may have just missed a really obvious mistake, can anyone spot anything that would lead to this not working

Answer 1

You are not checking the elements for values in your if statement properly.

In an if statement that has && (or || ) conditions, each condition must be complete and stand on its own.

Additionally, to check a form field for data, you must check its value property.

You also had =! instead of != .

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

Answer 2

you're checking if the dom elements are truthy (that will always be true as long as you declare them in your html) rather then check if they have a value set

change your if to

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

Answer 3

1) Operator =! doesn't exist. != does.

2) textboxVType textboxVName textboxVNumber textboxVCode textboxVAmount =! " " textboxVAmount =! " " are 4 distinct conditions. You can't factorise condition such way. Instead, you have to write that way textboxVType.value != " " && textboxVName.value != " " && textboxVNumber.value != " " && textboxVCode.value != " " && textboxVAmount.value != " " The .value is used to access the value of the DOM elements you got.

3) If you want to check if a textbox is empty rather use != "" instead of != " " (that will only check if the textbox contains only a space)

Answer 4

While I appreciate you're just starting with JS, and this might be slightly above your comfort zone, you might be interested in a shortcut to writing down and checking all the values of the input ids separately:

Here we pick up all the inputs using querySelectorAll , and then check the value of each one with some . If any of them are empty then Accepted is alerted, otherwise Try Again.

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

Short demo on JSFiddle .