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.

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
– cookie monster, Commented Feb 9, 2014 at 23:28
...also, find your browser's developer console, and open it to view error messages. — cookie monster
– cookie monster, Commented Feb 9, 2014 at 23:28
Please don't apologise I need constructive criticism to improve I sincerely appreciate the advice thank you :) — user3290885
– user3290885, Commented Feb 10, 2014 at 0:13

ElDoRado1239 · Accepted Answer · 2014-02-09 23:33:38Z

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();">

answered Feb 9, 2014 at 23:33

ElDoRado1239

4,0582 gold badges18 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3290885 Over a year ago

This worked an absolute treat thank you so so so much I appreciate this so much!

cookie monster Over a year ago

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.

Collectives™ on Stack Overflow

Javascript arrays issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related