如何创建显示基于提示输入类型的文本的警报弹出窗口？

Question

I am a beginner experimenting with some basic Javascript. My goal is to show a (1.) prompt message (requesting a name) followed by an (2.) alert based on the prompt input. If the prompt input is a valid name (string) then an alert box should appear with text "thank you" + name. Else the alert should appear with the text "you didn't enter a valid name".

The 1. prompt message is working, however, the 2. alert message shows me the same text whether i enter a name/text or a number. In other words the alert message is not distinguishing between text string or number and is always showing the text "thank you" + name.

this is my code:

 function EnterName() { var name = prompt("Enter your name here:"); if (typeof name === "string") { alert("thank you " + name); } else if (typeof name === "number") { alert("you didn't enter a valid name"); } } console.log(EnterName()); 

Would appreciate any insights in how to make the alert box show "you didn't enter a valid name" when a number is entered in the prompt box.

Thanks.

Answer 1

Prompt always returns a string, you could try to convert it to a number and then check to see if it NaN's on you which means it's a string. It would be better to use a regexp here though. You may also want to return the name if you are logging it.

function EnterName() {
  var name = prompt("Enter your name here:");
  var isNum = !isNaN(Number(name));
  if (!isNum) {
    alert("thank you " + name);
  } else {
    alert("you didn't enter a valid name");
  }
  return name;
}
console.log(EnterName());

Answer 2

You always enter strings into prompts. SO you can try to make it a int below and if it succeeds then give an error message otherwise say hello.

function EnterName() {
  var name = prompt("Enter your name here:");
  if(parseInt(name)) {
    alert("you didn't enter a valid name");
  }
  else if (!parseInt(name)) {
    alert("thank you " + name);
  }
}

Answer 3

prompt method parameters type are alway String , no matter what you enter, your condition will always true :

 //text & defaultText types are String
`prompt(text, defaultText)`

So you need to change your condition. One solution is using regex for example you can change your code to this :

function EnterName() {
   var name = prompt("Enter your name here:");
   !name.match(/^\d+$/) ?
        alert("thank you " + name)
    :     
        alert("you didn't enter a valid name");
}
console.log(EnterName());

Basically !name.match(/^\\d+$/) will check if input data is number or not and based on that will show the alert messages.

https://jsfiddle.net/6mxL59k0/1/

Answer 4

So, one thing I want to emphasize is how you are approaching solving this problem. You are looking at your problem thinking, "If I type in a number, this should be false! Why isn't it working?!". The reason why is because prompt will always return a value that is typed to a string . You are looking to see if there is a number or an int depending on the language.

So, we can break this into two problems. See if this guy is a string, see if that string contains a number

The code below shows a great way to do that using two functions

function enterName() { // Javscript functions should always start with a lowercase unless it is a function express and can be invoked using the `new` keyword
  var name = prompt("Enter your name here:");
  if (!checkIfContainsNumber(name)) {
    alert("thank you " + name);
  } else { // if f we dont have a number, we have a valid name, otherwise we are invalid!
    alert("you didn't enter a valid name");
  }
}

So we have our main function, it takes in the promp which always returns a string

// this solves problem 2, seeing if we have a number inside of our string
function checkIfContainsNumber(myString) {
  return /\d/.test(myString);
}

enterName();

our second function checkIfContainsNumber solves part 2 of our problem using a regex expression that matches for a digit ( d in this case)