JavaScript - Why am I getting undefined?

[Tech Wizard]

Hello, making a name generator for a school project. You're suppose to fill in firstname in the first box, surname in the second and press the button to generate a new nickname.

Why am I getting undefined rather than the new nicknames? See pics.

 

EDIT: Pastebin here: https://pastebin.com/MZVx8LrC

 

 

 

[MedievalMatt]

6 minutes ago, Tech Wizard said:

Hello, making a name generator for a school project. You're suppose to fill in firstname in the first box, surname in the second and press the button to generate a new nickname.

Why am I getting undefined rather than the new nicknames? See pics.

 

EDIT: Pastebin here: https://pastebin.com/MZVx8LrC

I think you need to specify First Second and Third as Arrays.

[Tech Wizard]

Just now, MedievalMatt said:

I think you need to specify First Second and Third as Arrays.

Aren't they already specified as arrays in the top?

[vorticalbox]

9 hours ago, Tech Wizard said:

 

it's because you're calling toUpperCase() on your inputs but all your keys are lower case. 

 

You cam also reduce your dictionary Bu just having one then an array inside it.

 

let me get on my computer all ill show you what I mean. 

[Jbonnett]

Just to let you know you can use the string as an array, after all a string is an array of chars.

 

var name = "Jamie";

name[0]; // value is J
name[1]; // value is a
name[2]; // value is m
name[3]; // value is i
name[4]; // value is e

Hope this helps.

[mikat]

1 hour ago, vorticalbox said:

it's because you're calling toUpperCase() on your inputs but all your keys are lower case. 

 

You cam also reduce your dictionary Bu just having one then an array inside it.

 

let me get on my computer all ill show you what I mean. 

http://jsbin.com/sedeniniju/edit?html,js,output

Done it for you, I also discovered this, the name is being uppercased and the keys in the object are lowercase

changed:

var name = document.getElementById("txtName").value.toUpperCase();
var surname = document.getElementById("txtSurname").value.toUpperCase();

to:

var name = document.getElementById("txtName").value.toLowerCase();
var surname = document.getElementById("txtSurname").value.toLowerCase();

 

[Tech Wizard]

2 hours ago, vorticalbox said:

it's because you're calling toUpperCase() on your inputs but all your keys are lower case. 

 

You cam also reduce your dictionary Bu just having one then an array inside it.

 

let me get on my computer all ill show you what I mean. 

 

59 minutes ago, Jbonnett said:

Just to let you know you can use the string as an array, after all a string is an array of chars.

 

var name = "Jamie";

name[0]; // value is J
name[1]; // value is a
name[2]; // value is m
name[3]; // value is i
name[4]; // value is e

Hope this helps.

 

53 minutes ago, mikat said:

http://jsbin.com/sedeniniju/edit?html,js,output

Done it for you, I also discovered this, the name is being uppercased and the keys in the object are lowercase

changed:

var name = document.getElementById("txtName").value.toUpperCase();
var surname = document.getElementById("txtSurname").value.toUpperCase();

to:

var name = document.getElementById("txtName").value.toLowerCase();
var surname = document.getElementById("txtSurname").value.toLowerCase();

 

Thanks team! It's working now

[vorticalbox]

3 hours ago, mikat said:

http://jsbin.com/sedeniniju/edit?html,js,output

Done it for you, I also discovered this, the name is being uppercased and the keys in the object are lowercase

 

 

Not 100% what I had in mind I was thinking more like this

 

window.onload = startup;

//now we have one dict with all the names 

var names = {
  a: ['Frodo', 'Darth', 'Harry'],
  b: ['Bilbo', 'Vader', 'Potter'],
  c: ['Gandalf', 'Yoda', 'Hermione'],
  d: ['Sauron', 'Luke', 'Granger'],
  e: ['Legolas', 'Anikan', 'Lord'],
  f: ['Aragorn', 'Skywalker', 'Voldemort'],
  g: ['Gollum', 'Obi-Wan', 'Draco'],
  h: ['Nazgul', 'Kenobi', 'Malfoy'],
  i: ['Elrond', 'Leia', 'Ron'],
  j: ['Galadriel', 'Boba', 'Weasley'],
  k: ['Arwen', 'Han', 'Professor'],
  l: ['Gimli', 'Palpatine', 'Albus'],
  m: ['Balrog', 'Padme', 'Dumbledore'],
  n: ['Samwise', 'Chewbacca', 'Severus'],
  o: ['Saruman', 'Jabba', 'Snape'],
  p: ['Boromir', 'Maul', 'Dobby'],
  q: ['Eowyn', 'Jar Jar', 'Neville'],
  r: ['Peregrin', 'Binks', 'Longbottom'],
  s: ['Meriadoc', 'General', 'Luna'],
  t: ['Faramir', 'Grievous', 'Lovegood'],
  u: ['Glorfindel', 'Mace', 'Rubeus'],
  v: ['Theoden', 'Windu', 'Hagrid'],
  w: ['Eomer', 'Count', 'Sirius'],
  x: ['Shelob', 'Dooku', 'Black'],
  y: ['Treebeard', 'Aayla', 'Ginny'],
  z: ['Isildur', 'Stormtrooper', 'Myrtle'],
  æ: ['Grima', 'Jango', 'Jango'], 
  ø: ['Denethor', 'Admiral', 'Fluffy'], 
  å: ['Lurtz', 'Ackbar', 'He who must not be named']

}
 
 
//Define functions
function startup(){
    document.getElementById("btnNickname").onclick = generate;
  }
 
function generate(){
    var name = document.getElementById("txtName").value.toLowerCase();
    var surname = document.getElementById("txtSurname").value.toLowerCase();
 
    var firstName = names[name.split("")[0]][0];//split and grab the first item, then grap the first item in are dict
 
    //leave this one as you are gettign the last letter too
    var surnameArray = surname.split("");
    var secondName = names[surnameArray[0]][1];
    var thirdName = names[surnameArray.pop()][2];

    output = document.getElementById("print")
    //using ` for a template

    output.insertAdjacentHTML('beforeend', `<p>Navnet ${name} surname ${surname} finnes ikke lenger!<p>`)
    output.insertAdjacentHTML('beforeend', `<p>Ditt nye kallenavn er ${firstName} ${secondName} ${thirdName}. Ditt nye pass kommer neste uke.<p>`)
    output.insertAdjacentHTML('beforeend', `<p>E-posten ${firstName}${secondName}${thirdName}@outlook.com er allerede blitt laget for deg.<p>`)

}

 

[mikat]

41 minutes ago, vorticalbox said:

Not 100% what I had in mind I was thinking more like this

 

window.onload = startup;

//now we have one dict with all the names 

var names = {
  a: ['Frodo', 'Darth', 'Harry'],
  b: ['Bilbo', 'Vader', 'Potter'],
  c: ['Gandalf', 'Yoda', 'Hermione'],
  d: ['Sauron', 'Luke', 'Granger'],
  e: ['Legolas', 'Anikan', 'Lord'],
  f: ['Aragorn', 'Skywalker', 'Voldemort'],
  g: ['Gollum', 'Obi-Wan', 'Draco'],
  h: ['Nazgul', 'Kenobi', 'Malfoy'],
  i: ['Elrond', 'Leia', 'Ron'],
  j: ['Galadriel', 'Boba', 'Weasley'],
  k: ['Arwen', 'Han', 'Professor'],
  l: ['Gimli', 'Palpatine', 'Albus'],
  m: ['Balrog', 'Padme', 'Dumbledore'],
  n: ['Samwise', 'Chewbacca', 'Severus'],
  o: ['Saruman', 'Jabba', 'Snape'],
  p: ['Boromir', 'Maul', 'Dobby'],
  q: ['Eowyn', 'Jar Jar', 'Neville'],
  r: ['Peregrin', 'Binks', 'Longbottom'],
  s: ['Meriadoc', 'General', 'Luna'],
  t: ['Faramir', 'Grievous', 'Lovegood'],
  u: ['Glorfindel', 'Mace', 'Rubeus'],
  v: ['Theoden', 'Windu', 'Hagrid'],
  w: ['Eomer', 'Count', 'Sirius'],
  x: ['Shelob', 'Dooku', 'Black'],
  y: ['Treebeard', 'Aayla', 'Ginny'],
  z: ['Isildur', 'Stormtrooper', 'Myrtle'],
  æ: ['Grima', 'Jango', 'Jango'], 
  ø: ['Denethor', 'Admiral', 'Fluffy'], 
  å: ['Lurtz', 'Ackbar', 'He who must not be named']

}
 
 
//Define functions
function startup(){
    document.getElementById("btnNickname").onclick = generate;
  }
 
function generate(){
    var name = document.getElementById("txtName").value.toLowerCase();
    var surname = document.getElementById("txtSurname").value.toLowerCase();
 
    var firstName = names[name.split("")[0]][0];//split and grab the first item, then grap the first item in are dict
 
    //leave this one as you are gettign the last letter too
    var surnameArray = surname.split("");
    var secondName = names[surnameArray[0]][1];
    var thirdName = names[surnameArray.pop()][2];

    output = document.getElementById("print")
    //using ` for a template

    output.insertAdjacentHTML('beforeend', `<p>Navnet ${name} surname ${surname} finnes ikke lenger!<p>`)
    output.insertAdjacentHTML('beforeend', `<p>Ditt nye kallenavn er ${firstName} ${secondName} ${thirdName}. Ditt nye pass kommer neste uke.<p>`)
    output.insertAdjacentHTML('beforeend', `<p>E-posten ${firstName}${secondName}${thirdName}@outlook.com er allerede blitt laget for deg.<p>`)

}

 

That also works, but if you're gonna optimize the code and make it more readable, you should just remove the x.split(""), this is only useful if you need array methods like map, reduce and foreach