Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Simple JavaScript question

I'm hoping someone can help me understand by JS is behaving the way it is. Consider the following script...

  <script>
    var yourName = prompt("What is your name?");

    if(yourName != null){
      document.getElementById('sayHello').innerHTML = "Hello " + yourName;
    } else {
      alert("Please enter a name");
    }
  </script>

What I'm expecting is that if the prompt box doesn't have any input, then the else clause will be activated and the alert box will then pop up saying, "Please enter a name." However, the alert box executed by the else clause only pops up when I hit 'cancel' (when the field is left black). If I leave the field blank and hit 'OK' then the empty space is simply concatenated to the end of "Hello" leaving "Hello " on the screen instead of triggering the else clause.

Can anyone help me understand why this is happening and possibly suggest a way around this issue?

4 Answers

For starters prompt returns a string. So if the string is an empty, it is an empty string or "" (instead of null, null is an object of it's own which it seems you are getting when you press cancel).

Let me know if that was helpful.

It does help understand what is going on. Any suggestions on solving that problem?

I've tried replacing '!= null' with 'str.length > 0' but that causes a syntax error.

   <script>
    var yourName = prompt("What is your name?");

    if(yourName str.length > 0){
      document.getElementById('sayHello').innerHTML = "Hello " + yourName;
    } else {
      alert("Please enter a name");
    }
  </script>

SyntaxError: missing ) after condition 22:16 (Line 22 is the line with the 'if' statement)

Got it! Just used 'yourName > 0' and it works with both the "OK" and "Cancel" buttons now. Thanks @jeffrybachynski

  <script>
    var yourName = prompt("What is your name?");

    if(yourName > 0){
      document.getElementById('sayHello').innerHTML = "Hello " + yourName;
    } else {
      alert("Please enter a name");
    }
  </script>

Hey, doesn't really make sense that is working with yourName > 0 the javascript interpreter will try to convert yourName to a integer and will fail setting the value of yourName to null, one of the correct ways to check if a variable holding a string is not actually empty would be yourName.length > 0. Run this code:

var a = '';
var b = 'Some string';
var c = 2;

// this will return false because the javascript interpreter will try to convert a to an integer before doing the comparasion 

if(a > 0){ 
    alert('a > 0');
}
//Same here 
if(b > 0){
  alert('b > 0');
}
// this will work because c is an integer that is bigger than 0
if(c > 0){
    alert('c > 0');
}

//Now to correctly check if a string is not empty you could use the .length property which is available on string type

if(a.length === 0){ // this is true because the length of an empty string is 0
    alert('a.length === 0');
}

if(b.length > 0){
    alert('b.length > 0 the length of "Some string" is '+ b.length);
}

Hopefully I helped you a bit with this.

Yeah, I noticed that when I went back to test the rest of it out. Using .length was the right solution-thanks for chiming in!