CODEWITHSUNDEEP
javascript
JAY-ARE-GEE
JAY-ARE-GEE

Reputation: 17

New to Javascript, having some trouble with conditions

I'm pretty green in the coding department and starting to learn a bit of javascript in a class. We've been tasked with what should be a pretty simple assignment, but our teacher's teaching style is a little on the vague side and I'm having difficulties with our current assignment. In a text field we're supposed to relay error messages off to the side when certain conditions are met, such as a "enter a name" message when there are no characters, "not enough" when there's less than a certain amount, "too many" at another amount, etc etc.

I'm having a rough time trying to get my statement to work correctly and I'm not sure where I'm going wrong with it. I'm able to get the individual pieces to work, but when placing it all together with if/else if/else, it seems to either skip and/or mix up steps or just cease functioning altogether. Any guidance here would be greatly appreciated!

(currently with what I have below, it displays the message from the if (or less than 5) when there are no characters, but does nothing else)

function whichKey(event) {

  var name = document.getElementById("nameInput").value;
  var errorList = document.getElementById("errorOutput");
  var errorOne = document.createElement("a");

  while (name == 0) {
    errorOne.innerText = "You must enter a name";

    if (name < 5) {
      errorOne.innerText = "You must enter at least 5 characters";
    } else if (name >= 25) {
      errorOne.innerText = "You can not enter a name with more than 25 characters";
    } else {
      document.getElementById("errorOutput").value = "";
    }
    errorList.appendChild(errorOne);
    name++;
  }
}

Upvotes: 1

Views: 87

Answers (5)

user12950736
user12950736

Reputation:

Switch

       var name = document.getElementById("nameInput").value;

With this

       var name = document.getElementById("nameInput").value.length;

AND changewhile (name == 0) to if (name == 0)

Then remove all of the if statements out of the one you just edited...

Final code

 function whichKey(event) {

  var name_length = document.getElementById("nameInput").value.length;
  var errorList = document.getElementById("errorOutput");
  var errorOne = document.createElement("a");

 if (name_length === 0) {
    errorOne.innerText = "You must enter a name";

    else if (name < 5) {
      errorOne.innerText = "You must enter at least 5 characters";
    } else if (name >= 25) {
      errorOne.innerText = "You can not enter a name with more than 25 characters";
    } else {
      document.getElementById("errorOutput").value = "";
    }
    errorList.appendChild(errorOne);
  }
}`

Hope this helps!

Upvotes: 0

user128511
user128511

Reputation: 

function whichKey(event) {
  const nameLength = document.getElementById("nameInput").value.length;
  const errorList = document.getElementById("errorOutput");
  const errorOne = document.createElement("a");

  if (nameLength === 0) {
    errorOne.innerText = "You must enter a name";
  } else if (nameLength < 5) {
    errorOne.innerText = "You must enter at least 5 characters";
  } else if (nameLength >= 25) {
    errorOne.innerText = "You can not enter a name with more than 25 characters";
  } else {
    document.getElementById("errorOutput").value = "";
  }
  errorList.appendChild(errorOne);
}

A few notes:

  • You need the length of the name, not the name to do your checks
  • You don't need the while(name === 0). It should just be another "if"
  • You really don't need the >= 25. You can just set the maxlength of the input element <input type="text" maxlength="25">
  • You might want to trim the name nameLength = ...value.trim().length so that if the user types a few spaces it won't count as satisfying your checks.

Upvotes: 0

Refael
Refael

Reputation: 238

  1. You have to change var name to

var name_length = document.getElementById("nameInput").value.length;

  1. You have to remove the while loop and change it to if statement

You can try like this:

function whichKey(event) {

  var name_length = document.getElementById("nameInput").value.length;
  var errorList = document.getElementById("errorOutput");
  var errorOne = document.createElement("a");

  if (name_length === 0) {
      errorOne.innerText = "You must enter a name";
  } else if (name_length < 5) {
      errorOne.innerText = "You must enter at least 5 characters";
  } else if (name_length >= 25) {
     errorOne.innerText = "You can not enter a name with more than 25 characters";
  } else {
     document.getElementById("errorOutput").value = "";
  }

    errorList.appendChild(errorOne);

}

Upvotes: 1

Osama
Osama

Reputation: 3040

That is because you set the value of name at the the document is loaded and you set first if statement to name<5 which include 0, you have to do two things 1. Add eventlistener to treat with text change. 2. Make first if statement <5 and >1.

Upvotes: 0

Yosef Tukachinsky
Yosef Tukachinsky

Reputation: 5895

you put all the logic inside while (name===0), so in any other case it simply will not enter the if else statements...

I not see any reason to use while here. just rid of it.

Also, you should check name.length for get the length of the string.

Upvotes: 0

Related Questions