警报返回未定义（js）

Question

I am learning errors in js and I have came up with the following code:

function StartGame() {
  try {
   if (input.value == "") {throw alert("Complete blanks"); return false}
   if (!input.value.match(/^[A-Za-z]+$/)) {throw alert("Only letters allowed"); return false}
   if (input.value.length < 3) {throw alert("Must have at least 3 characters"); return false}}
   catch(errorAlert) {alert(errorAlert)}
  inputPanel.style.display = "none"

  ... //some code 
 }

let inputPanel = document.querySelector("#form")
let input = document.querySelector("#input") 

<form id="form" title="Write your name"> <label> Enter your username: </label>
   <input id="input" type="text" maxlength="10" autofocus>
   <button type="button" onclick="StartGame()" id="begin-game"> Submit </button>
  </form>

However, when throw event occurs (so when input is not properly submitted), first comes the alert (that is normal) BUT then, another alert appears saying "undefined" and returns the rest of the code true (the rest of the code runs). Instead, I would like that when input is not properly validated, there are no undefined alerts and it returns false. Any help please? Thanks

Answer 1

This is because of your throw keyword. Quoting MDN:

The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate.

You can read more about it here .

Also as other users pointed out, you should throw an Error, not an alert

Answer 2

You need to throw the message and then alert it inside the catch block. When you put a function in an throw statement, the function will be executed and the return value will be thrown.

 try{ // Do something that throws a message throw "Something messed up!"; }catch(message){ // Alert the message here alert(message); }

However, it's a much better idea to throw an Error object instead, as it contains helpful information for debugging purposes.

 try{ // do something that throws an error throw new Error("Something screwed up!"); }catch(e){ // alert the message here alert(e.message); // The error object also has other features // that make it helpful for debugging, like the stack trace console.log(e.stack); }