Javascript arrays issue

Question

I'm having a big issue with my website. I'm new to JavaScript, and I'm trying to use an array to store separate answers based on the answers entered into a text box. I'm using an online template I found here.

I'm changing this to suit what I need to do, though the answer is not working.

This works perfectly:

var answers = ["harry potter", "donald duck", "shrek", "supercoder"];
/*******************************/
//init() function
function init() {
 var myButton = document.getElementById("btnSubmit");
 myButton.onclick = registerName;
}
//assign init() function to onload event
onload = init;
/********************************************/
//registerName() function: it executes when user clicks the button
function registerName() {
 //set up main vars: Username entered by user,
 //a message string to communicate with the user,
 //a reference to the paragraph used to display the message,
 //and a boolean var (true/false) used as flag:
 //if the registration is successful, this is set to true,
 //if registration fails, this is set to false. It's initialized as false.
 //Notice how you chain getElementById(), value, and toLowerCase
 //to store the value entered by the user in lowercase
 var newName = document.getElementById("txtName").value.toLowerCase();
 var message = "";
 var result = document.getElementById("result");
 var success = false;
 var m1 = false;
 var m2 = false;
 var m3 = false;
 var m4 = false;
 var m5 = false;
 var m6 = false;
 var m7 = false;
 var m8 = false;
 var m9 = false;
 var m10 = false;
 var s1 = false;
 var s2 = false;
 //If the user clicks the button but the inputbox is empty
 //we alert the user and stop further program execution:
 if(newName == "") {
 alert("Please, enter a Username");
 return false;
 }
 //we loop over each Username stored in the array
 //to make sure the Username is not already in existence
 for(var i = 0; i < answers.length; i++) {
 //if we find a Username equal to the newly entered name,
 //it means the Username already exists and we can't
 //proceed with registration
 if(answers[i] == newName) {
 message = "Sorry, the Username " + answers[i] + " already exists. Try again";
 result.innerHTML = message;
 //set the success flag to false so the rest of the program knows
 //that registration failed
 success = false;
 //stop further program execution
 return false;
 }
 //else - if the Username entered by the user
 //is not already stored in the application, register new user:
 else {
 message = "Great, you've successfully registered with us as " + newName;
 result.innerHTML = message;
 //set the success flag to true, so the program knows
 //the new Username can be added
 success = true;
 }
 }
 //Now you're out of the loop
 //if registration was successful (success flag is true),
 //add new Username to the array with push()
 if(success) {
 answers.push(newName);
 }
 //display Usernames sorted alphabetically on a new line
 result.innerHTML += "<br />" + answers.sort();
}

However, when I add the if else statements necessary to add in certain strings based on the input it ceases to work

//global array: it's outside any function
var answers = ["harry potter", "donald duck", "shrek", "supercoder"];
/*******************************/
//init() function
function init() {
 var myButton = document.getElementById("btnSubmit");
 myButton.onclick = registerName;
}
//assign init() function to onload event
onload = init;
/********************************************/
//registerName() function: it executes when user clicks the button
function registerName() {
 //set up main vars: Username entered by user,
 //a message string to communicate with the user,
 //a reference to the paragraph used to display the message,
 //and a boolean var (true/false) used as flag:
 //if the registration is successful, this is set to true,
 //if registration fails, this is set to false. It's initialized as false.
 //Notice how you chain getElementById(), value, and toLowerCase
 //to store the value entered by the user in lowercase
 var newName = document.getElementById("txtName").value.toLowerCase();
 var message = "";
 var result = document.getElementById("result");
 var success = false;
 var m1 = false;
 var m2 = false;
 var m3 = false;
 var m4 = false;
 var m5 = false;
 var m6 = false;
 var m7 = false;
 var m8 = false;
 var m9 = false;
 var m10 = false;
 var s1 = false;
 var s2 = false;
 //If the user clicks the button but the inputbox is empty
 //we alert the user and stop further program execution:
 if(newName == "") {
 alert("Please, enter a Username");
 return false;
 }
 //we loop over each Username stored in the array
 //to make sure the Username is not already in existence
 for(var i = 0; i < answers.length; i++) {
 //if we find a Username equal to the newly entered name,
 //it means the Username already exists and we can't
 //proceed with registration
 if(answers[i] == newName) {
 message = "Sorry, the Username " + answers[i] + " already exists. Try again";
 result.innerHTML = message;
 //set the success flag to false so the rest of the program knows
 //that registration failed
 success = false;
 //stop further program execution
 return false;
 }
 //else - if the Username entered by the user
 //is not already stored in the application, register new user:
 else {
 message = "Great, you've successfully registered with us as " + newName;
 result.innerHTML = message;
 //set the success flag to true, so the program knows
 //the new Username can be added
 success = true;
 }
 }
 //Now you're out of the loop
 //if registration was successful (success flag is true),
 //add new Username to the array with push()
 if(newName == "a=0, b=20") {
 answers.push("m1");
 answers.push("s1");
 } else if(newName == "a=20, b=20") {
 answers.push("m2");
 answers.push("s1);
 }
 else if (newName == "
 a = 10, b = 0 ")
 {
 answers.push("
 m3 ");
 answers.push("
 s1 ");
 }
 else if (newName == "
 a = 10, b = 10 ")
 {
 answers.push("
 m4 ");
 answers.push("
 s1 "); 
 }
 else if (newName == "
 a = 30, b = 50 ")
 {
 answers.push("
 m5 ");
 answers.push("
 s1 ");
 }
 else if (newName == "
 a = 0, b = 30 ")
 {
 answers.push("
 m6 ");
 answers.push("
 s1 ");
 }
 else if (newName == "
 a = 40, b = 30 ")
 {
 answers.push("
 m7 ");
 answers.push("
 s1 ");
 }
 else if (newName == "
 a = 40, b = 0 ")
 {
 answers.push("
 m8 ");
 answers.push("
 s1);
 } else if(newName == "a=10, b=20") {
 answers.push("m9");
 } else if(newName == "a=20, b=10") {
 answers.push("m10");
 answers.push("m1");
 answers.push("s2");
 answers.push("m2");
 answers.push("m3");
 answers.push("m4");
 } else if(newName == "a=30, b=30") {
 answers.push("m5");
 answers.push("m6");
 answers.push("m7");
 answers.push("m8");
 answers.push("m9");
 answers.push("s2");
 }
 if(success) {
 answers.push(newName);
 }
 //display Usernames sorted alphabetically on a new line
 result.innerHTML += "<br />" + answers.sort();
}

I apologise I'm sure this is something blatantly obvious.

• cookie monster: Sorry, but your code is a mess. Use a tool like jsbeautifier.org to help you format your code. If you scroll down the second code block, and pay attention to the code highlighting, you'll discover your issue.
• cookie monster: ...also, find your browser's developer console, and open it to view error messages.
• user3290885: Please don't apologise I need constructive criticism to improve I sincerely appreciate the advice thank you :)

Answer 1

Your IF section at the bottom has syntax errors. The "a=20, b=20" part and "a=40, b=40" are incorrectly quoted.

else if (newName == "a=20, b=20")
{
 answers.push("m2");
 answers.push("s1); <---
}

And this

else if (newName == "a=40, b=0")
{
 answers.push("m8");
 answers.push("s1); <---
}

Also instead of

onload = init;

try using

<body onload="init();">

• user3290885: This worked an absolute treat thank you so so so much I appreciate this so much!
• cookie monster: The onload = init; part should actually work. It's equivalent to doing window.onload = init, which would assign the handler function to be invoked after everything is loaded.