How to make a name generator

In this tutorial I’ll show how to make a simple name generator. A sort of  “build your own name generator” to experiment with. You just need to add your own word lists and you’re up and running.  But you can expand and modify the  name generator code to your own likings and abilities.

The name generator tutorial is very simple and are aimed at absolute beginners in web programming.

But enough talk, here is some name generator code that makes superhero names:

function generator(){
  // Add your own words to the wordlist. Be carefull to obey the showed syntax
  var adjectives = ["Cool","Masked","Bloody","Lame"]
  var animals = ["Hamster","Moose","Lama","Duck"]

  // Random numbers are made
  var randomNumber1 = parseInt(Math.random() * adjectives.length);
  var randomNumber2 = parseInt(Math.random() * animals.length);
  var name = adjectives[randomNumber1] + " " + animals[randomNumber2];

  alert(name); //Delete this when the below works            

  //If there's already a name it is removed  
  if(document.getElementById("result")){
    document.getElementById("placeholder").removeChild(document.getElementById("result"));
  }
  // A div element is created to show the generated name.
  //The Name is added as a textnode. Textnode is added to the placeholder.
  var element = document.createElement("div");
  element.setAttribute("id", "result");
  element.appendChild(document.createTextNode(name));
  document.getElementById("placeholder").appendChild(element);
}

The script is a simplified version of the one I use to make superhero names with my superhero generator.

The name generator piece by piece

The arrays

The most important part of  the name generator is the word lists. The more words in the list the more variety in the output. So the first part to do is to create a couple of arrays holding all our cool words:

var adjectives = ["cool","masked","bloody","lame"];
var animals = ["hamster","moose","lama","duck"]

To retrieve data  from the list we call the name of array with the count of the word as a parameter in a square bracket.  Be aware that counting in programming almost always starts at zero and not at 1.

So adjectives[0] is cool and  animals[1] gives moose

Randomness

We of course want random names, so we need to replace the hard coded numbers with random numbers. In our case numbers between 0 and 3 because we have 4 words in our lists. Instead of counting the words ourself, we let the JavaScript .length function do the counting. Then we multiply it with a random floating-point number between 0 and 0.9999999999999. Finally we use the parseInt() funktion to make the floating-point number into an integer.

All sounds a bit complicated but code wise  it’s  quite easy.

randomNumber1 = parseInt(Math.random() * adjectives.length);
randomNumber2 = parseInt(Math.random() * animals.length);

The output

The most simple way to output the name is using the alert() function. I use it only to check the generated name cause,  the alert box is  very annoying. So just delete the line, when the code below is up an running.

We will use 7 extra lines to integrate the result into the web page in a more natural way.

But before we begin you need to make an empty div tag in your HTML:

<div id=”placeholder”></div>

And here are the 7 lines that write the result in the page..

if(document.getElementById("result")){
  document.getElementById("placeholder").removeChild(document.getElementById("result"));
}

element = document.createElement("div");
element.setAttribute("id", "result");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholder").appendChild(element);

In short it works like this:

  1. If there’s already a result it is removed
  2. Then a new div element to hold the result  is created
  3. The name is added as a text node
  4. Finally the element is appended to a placeholder in the HTML.

When this part works, you can delete the alert(name) from the script.

Putting it all together

The generator function can either be included in the head of the HTML document or you can place it in a external JavaScript file.

Now you can call the function from your HTML page.  I always do it 2 places. First in the body tag with an onload event. The generator function then also runs when the page is loaded.

<body onload=”generator()”>

And then I also call the JavaScript function on a button:

<input type=”button” onclick=”generator()” />

Download the name generator script

Download name generator script here and read the description of how to make the name generator script work.

Extra funcionality

The random functions in this guide is very simple. At some time you’ll probably want to make more complex and interesting names. Here you can see how to make more complex random names.

On all of my name generators I also have a save list, which saves all the generated names to a list. Read here how to add a save list to the name generator.

Also remember to visit my name generators to see  how I make superhero names with the superhero generator.

This entry was posted in Name generator stuff and tagged , , . Bookmark the permalink.

63 Responses to How to make a name generator

  1. Emily says:

    Hi 🙂

    Thank you for your tutorial. I know only a little html and no javascript. Can you please tell me where I place the script on my web page to make it work.

  2. Niels says:

    Hi Emily.

    You can place the script in the head of the webpage like this:

    <script type="text/javascript">
    function generator(){
        ... code here ...
    }
    </script>

    Or you can place it in an external file and call it like this

    <script type="text/javascript" src="generator-script.js"></script>

    Then just call the generator function from the button as explained above.

    Hope it helped. 🙂

    If not, I’m working on making a complete script, where all necessary code is gathered in one single file. Easy to run and easy to experiment with. Stay tuned for a couple of days, and I’ll get it uploaded.

    EDIT: A download link to a fully functional script is now added to the article.

  3. Pingback: Name generator script « Name Generators Blog

  4. Pingback: Name generator widget « Name Generators Blog

  5. Pingback: Name Generators Blog » Name randomizer

  6. Joey says:

    This tutorial is great! I was just wondering, if I had three word lists, is there a way to make the third word dependent on the first two? For instance, could I make it so that every time it randomly selected the words “cool” and “moose” out of the first two lists, it would then select “avenger,” or some other word, from the third word list?

  7. Niels says:

    Thanks Joey. 🙂

    Yes, but you can end with some pretty long conditional statements in your name generator script. I assume you have a line that something says like this:

    randomNumber3 = parseInt(Math.random() * titles.length);

    Then you could add this condition

    if(adjectives[randomNumber1]=="cool"&&animals[randomNumber2]=="moose"){
        var name = adjectives[randomNumber1] + " " + animals[randomNumber2] + " " + titles[randomNumber3];
    }else{
        var name = adjectives[randomNumber1] + " " + animals[randomNumber2];
    }
    

    You can chain as many of these conditions together, but as you can imagine they can grow pretty long, depending on how many special cases you wanna make.

    Check this link for conditional statements: http://www.w3schools.com/js/js_if_else.asp and if you get many else if conditions also check the switch syntax at w3 schools for a little easier way to do the same thing.

  8. Jason says:

    How do i show the results in a text box?

  9. Jason says:

    Also how do i add a space in between the generated answers, because my generator, generates several answers, but it buts it all in one line.

    eg. Here is my code:

    // Random numbers are made 
    var randomNumber1 = parseInt(Math.random() * wordlist1.length);
    var randomNumber2 = parseInt(Math.random() * wordlist2.length);
    var randomNumber3 = parseInt(Math.random() * wordlist3.length);
    var namedep =  "  Departure Airport:  " + wordlist1[randomNumber1];
    var namearr =  "  Arrival Airport:   " + wordlist2[randomNumber2];
    var nametime =  "  Time:   " + wordlist3[randomNumber3];
    
    //alert(name); //Remove first to slashes to alert the name
    	
    //If there's already a name it is removed  
    if(document.getElementById("result")){
    	document.getElementById("placeholder").removeChild(document.getElementById("result"));
    }
    // A div element is created to show the generated name. The Name is added as a textnode. Textnode is added to the placeholder.
    var element = document.createElement("div");
    element.setAttribute("id", "result");
    element.appendChild(document.createTextNode(namedep));
    element.appendChild(document.createTextNode(namearr));
    element.appendChild(document.createTextNode(nametime));
    document.getElementById("placeholder").appendChild(element);

    I want a space in between:

    var namedep = ” Departure Airport: ” + wordlist1[randomNumber1];
    SPACE HERE
    var namearr = ” Arrival Airport: ” + wordlist2[randomNumber2];
    SPACE HERE
    var nametime = ” Time: ” + wordlist3[randomNumber3];

  10. Niels says:

    Hi Jason. 🙂

    Looks like an interesting project. Very cool to see that you are using the name generator script to make a different kind of random generator.

    To format your text with spaces (or other characters), try to build the string with the final output, BEFORE you create the textnode, then you can format the text exactly like you wish. Something like this:

    var finalOutput=namedep + ” ” + namearr + ” ” + nametime;

    And then create the textnode. Like this:

    element.appendChild(document.createTextNode(finalOutput));

    If you wanna show the finalOutput in a input text field or a textarea, create the right HTML in the document. Give it a unique ID like “textField” and do add the value like this:

    document.getElementById(“textField”).value= finalOutput;

    If you wanna use a input text field or textarea you can drop the last 12 lines of your script (after the alert). These lines are all about creating a DOM element and showing the result in that element. Its obviously not needed if you instead choose to show the finalOutput in a input text field.

    Please let me know if it works for you.

  11. Alli says:

    Hi Niels–

    I am NOT a code writer; I am a composition teacher. I would like to give my students a randomizer on the order of Urbanspoon to create interesting rhetorical writing challenges. I would like 3 or 4 categories–such as “intended audience,” “rhetorical strategy,” and “purpose”–that I could input values into and then it would generate a combination for them to try writing. Is your program able to do that? Would I need a lot of code-writing expertise, or would I just need to do some substitutions?

    Thanks for your help!
    Alli

    • Niels says:

      Hi Alli. 🙂

      If you use my name generator script as a base I would say it’s a pretty easy task, even for a layman. You will need to do a little more than substitution. If you are a structured and logical kind of person, I’m sure you can do it. The script is throughly commented and here’s a quick guide to get you going.

      What you need to do, step by step:

      The word lists (arrays) needs substitution. Replace the existing with something like this:

      var audience = ["Children","Tech persons","House wifes"];

      For each category you need to make an array. And for each category you’ll have to make a random number, like the example has 2 random numbers, because it has 2 wordlists/arrays.

      Instead of a name you create the challenge like this:

      var challenge =  audience[randomNumber1] + " " + strategy[randomNumber2] + " " + purpose[randomNumber3];

      This will just show the words from each array with a space between them. To make it more readable you’ll probably want to add some words in the result instead. These will be inserted in the quotes likes this:

      var challenge =  "Intended audience: " +  audience[randomNumber1] + ".  Rhetorical strategy: " + strategy[randomNumber2] + ". Purpose: " + purpose[randomNumber3];

      To show the challenge in an easy way you can do this:

      alert(challenge);

      This will show the result in a JavaScript pop up box.

      If you do it this way you’ll of course have to change the names of the variables through out the script. All “adjectives” will be replaced with “audience”, and “name” with “challenge” etc.

      And remember to be very careful to obey the exact syntax I use in the script. A wrong character in the wrong place is enough to make everything stop working.

      Good luck, and let me know how it works out.

  12. Tina says:

    Helllo Neils

    Thank you so much for this wonderful script! I’ve been searching for a while for a script that came with easy instructions. The script is going to liven up my geofiction project. However, I was wondering if you are willing to also share the how-to / code for creating the list of names from the generator?

    -Tina

  13. Niels says:

    Hi Tina

    Great idea. I’ll make a short example of how to make a list with all the generated names in a simple way.

    Unfortunately I’m pretty busy right now, but it’ll be my project for my March blog post.

    Stay tuned. It’ll be up before the end of next month.

  14. Tina says:

    Thanks Niels! Much appreciated.

  15. Pingback: Save the names from the name generator in a list | Name Generators Blog

  16. Suzanne says:

    Hi!
    I used your script to name my own generator and I’m very excited to publish it. Thank you! One question: How can I hide my name lists from the Right-Click/View Page Source clickers of the world? I work very hard to come up with unique names and would prefer they not be stolen all in one fail swoop.

    Thank you so much! Please feel free to write a review on my generator (as you noted above)!

  17. Niels says:

    Hi Suzanne.

    Cool horse name generator you have made. 🙂

    Unfortunately there’s no way you can hide your code and name arrays with a name generator coded in JavaScript. JavaScript is executed in the user browser and therefore all code, including the name arrays are loaded to the browser when you load the page.

    There might be some way though you can obfuscate the arrays, but tech users will still be able to copy them. But I can’t help on that subject, because I don’t know much about it.

    If you wanna give out only a single name at the time you must make a server side programmed name generator. Eg in php, asp, .net etc. Just as easy to make, but much much slower to use because the is called every time the user wants to make a new name.

    • Suzanne says:

      Thank you for getting back to me so quickly and for the compliment! I appreciate it. I was pretty proud of myself having figured that out by myself from your scripts. First time I’ve ever done anything like that! Was fun.
      Going to make another one soon as I add to the list for that one.

  18. Niels says:

    Thanks for getting back to me, Suzanne. 🙂

    I’m very thrilled that you could find your way through my name gen scripts. They are aimed at beginners, but you never know, how well it works out before some one has tried them and take the time to give some feedback.

  19. Stacy says:

    This is very cool, but is there a way to actually have the people type in their names first and then click submit?

  20. Niels says:

    Hi Stacy. 🙂

    Yes there is. You can add an input field, get the value (the input) from with javaScript and then use the inputted name in any way you want to in combination with different word arrays. And you can also make a check on the input field to validate if the user actually did fill it.

    All can be done with rather simple JavaScript, if you got the basic understanding of it.

    Good luck.

  21. Jimmy says:

    Hey I used your script to make an array of generators. I can open each one and it goes to its own webpage and functions. However when ever I try to add it to my website by inserting the HTML code, it has the generate button but when it is clicked nothing is generated. I am confused as to why this happens, please could you help me to figure out what is wrong with my code. Bear in mind I am not a coder, this is my first try thanks–

  22. Pace says:

    Neil, are you available for custom business name generator design? I’d like to be able to input words based on client’s needs and have other words suggested similar to an online thesaurus where synonyms and related concepts are put forward. I love the godaddy tie-in. Would also like to be able to rate each suggested name for help narrow down selections. Let me know. I’ve seen a sample online that I’d like to show you.
    p

  23. Cass says:

    Hello, thanks for this tutorial!
    I want to make a horse name generator for my Howrse.com help website, thebookofhowrse.weebly.com.
    Do I have to have two lines (like adjectives and the actual word)? Can I just have a name like “Miss Understood” or “Summer Born Wild” come out all at once with no chance of some kind of garbled version? (like miss wild understood or something).
    Also, can I leave out the body part of the code so that I can embed it on my weebly site (as it’s a drag and drop WYSIWYG editor)?
    Thanks!

    • Niels says:

      Hi Cass 🙂

      If you want to show a random chosen ‘fixed’ name rather than a randomly generated name you could just go with one simple array with full names and pick one randomly. Much simpler this name generator.

      Don’t know anything about Weebly, but implementing things like this generator requires that you know a little basic web programming to make it work.

      Best of luck
      Niels

  24. David says:

    Thank you for the name generator script and fantastic explanation.
    I may use one of the names for my character in Elder Scrolls Online, when it comes out in April. Perhaps an Orc warrior named ‘Fragglerock Banglesnatch’ -yes! awesome 🙂

  25. Niels says:

    Thanks a lot David. Great you find it useful. 🙂

  26. Radim says:

    Hi and thanks for this blog, I’ve installed simply script on a random generator to joomla 2.5 and names are not displayed and the error is Uncaught TypeError: Can not call method ‘appendChild’ of null. Here is a link http://goo.gl/wTqOeN.
    thank you in advance for your answer
    Radim

    • Niels says:

      Hi Radim

      You propapbly are missing an element with the correct ID in your HTML. The name generator code says

      document.getElementById(“placeholder”).appendChild(element);

      Check if you have the div-tag with the id=”placeholder”.

  27. Radim says:

    Niels,
    Thank you very much, repaired and functional
    Greetings to Denmark…

  28. Marcus says:

    Dear Niels,
    your script is great, many thanks for sharing it!
    Is it easy to drop the button and make the name generator work every few seconds?
    I am not too much of an HTML programmer, I know some C and Java, I thought I about using some delay function but I am not being very successful.
    Many thanks in advance for your help!
    Best
    Marcus

    • Niels says:

      Thanks for the kind words, Marcus. 🙂

      You’ll need to use the setTimeout() function.

      Here’s two brief examples copied from Stackoverflow

      setTimeout(function() {alert('hello');},1250);

      setTimeout(doSomething, 3000);
      function doSomething() {
      //do whatever you want here
      }

  29. Ethan says:

    Hi Niels,

    Great piece of code! I’m looking to create a generator for a website I’m designing at the moment. I’d like for users to be able to enter their first and last name and to be able to click submit to display the random name that’s generated from a list similar to yours? Do you have any example code or starting points I could go from with this? It’d be a great help!

    Many thanks,

    Ethan

    • Niels says:

      Thanks, Ethan. 🙂

      You need to add some html first. Could look something like this

      <input name="" type="text" id="username" />

      Then add something like this to the generator function:

      var username = document.getElementById("username").value;

      Now you got the username stored in a JavaScript variable and can it use it in your name gen.

      Good luck.

  30. Nate says:

    I love the code Niels, thanks for sharing!

    For my idea I’m just going with one long list of all of the combinations. In your example it would be “Cool Hamster,” “Cool Moose,” “Cool Duck,” etc.

    Is there a way to call a specific image to show with each result. For instance, if I wanted coolhamster.gif to show when “Cool Hamster” came up. Is that an easy addition to your code, or would I need something else completely?

    Nate

    • Niels says:

      Hi Nate.

      Fun idea, and it should be quite easy to tweak the code to do something like that.

      First you need to make a bunch of images with corresponding names. CoolHamster.gif, CoolMoose.gif etc

      In the code you write the image-name, like this:

      var imageName = "Cool" + wordlist2[randomNumber2] +".gif";

      And then insert the image into the DOM on the page. Try something like this:
      if(document.getElementById("image")){
      document.getElementById("placeholder").removeChild(document.getElementById("image"));
      }

      var element2 = document.createElement("img");
      element2.setAttribute("id", "image");
      element2.setAttribute("src", imageName );
      document.getElementById("placeholder").appendChild(element2);

      In the example I have changed the id’s and variable names so it can coexist with the name generator if you are interested in that. But be aware it’s just an example, and NOT tested. 😉

      Good luck

  31. Robert Ivan says:

    I couldn’t sleep last night so I made this silly Outdoorsman Name Generator adapted from your code. http://robertivan.com/name.html

  32. Clark Stevens says:

    I love the script so much Niels, thanks for sharing – so simple, so quick!

  33. C0NM4N says:

    Hey Niels,
    Thank you! I have made a name generator with your script and it would be great if you could review it. It is not much to look at, but it has 50+ words in each list.
    Thanks,
    C0NM4N.

  34. Joseph DR says:

    Hi Niels, thanks for this great tutorial and script/code. I am interested in making a name generator with three-word names. For example, “Captain Squishy Pants”. I intend to put it on my website for kids to generate their own funny names. Thanks!

    • Niels says:

      Hi Joseph, it’s actually quite simple.

      You just need to make a third array, just like the first two.

      var clothes = ["Pants","Socks","Shirt"];

      Then you also need a new random number:
      var randomNumber3 = parseInt(Math.random() * clothes.length);

      And finally add it to the name:

      var name = adjectives[randomNumber1] + " " + animals[randomNumber2] + " " + clothes[randomNumber3];

  35. Kai says:

    Hello and thank you for this lovely tutorial.
    I would like to add functionality to search for the randomly generated result, say on YouTube or Amazon or Google. I would be very grateful if you could help me find code to accomplish this.
    Thank so much,
    Kai

    • Niels says:

      Hi Kai. I’m sorry but I haven’t got the time for following that particular path right now. Hope you find some solutions out there. Good luck.

  36. Elias says:

    Neils,
    Thank you for the excellent script and tutorials. I’ve found them inspiring and illuminating. I’ve started creating a 30+ variable generator for building random characters for writing and role-playing, but unfortunately I’ve gotten stuck trying to implement an if/else conditional and savelist feature. I’ve gone over your instructions and responses , reviewed my code, and looked at the source code for your other generators but I’ve hit a wall. Since I’ve learned a great deal from your example script I was wondering if you would consider updating the example generator to include a 1-variable if-else condition and/or the save list feature? That way there would be a 1-file working example of the features you’ve described on your blog.
    Thanks again for all the excellent material.

    • Niels says:

      Thanks for the kind words, Elias. 🙂 Sounds like an interesting project. It’s a good idea to add the save list functionality to the code. But unfortunately I haven’t got the time for adding new stuff right now.

      If you having trouble find your way through all the conditions and variables it can be very helpful to ad some console.logs or alerts inside the different if else statements just to keep track of what is happening where. Use them too write out your variables to check, if the are what you expect them to be. Another simple trick is to simplify your conditions, so you are certain what happens in them. Fx if(2==2) {do something}.

  37. Aleksandar says:

    Hi. I have no questions or anything like that, I just want to commend you for your patience and the will to help out for even trivial questions. Cheers 🙂

  38. MoN says:

    Hi Niels,
    just want to say thank you for your great tutorial. It helped me a lot to create my website, myriadofnames.com.

  39. Thank you so much for this! I made a topic generator with your info. It generates an adjective + noun phrase to be used as a writing or photo prompt.

    http://jennifernicholewells.blogspot.com/2015/08/jnws-writing-photo-prompt-generator.html

  40. Adrian says:

    Thanks for the tutorial and the attached file! Complete newbie and the file was so easy to use and implement on my site! It adds a real unique touch to kickballaddict.com. I hope to add additional modifiers sometime in the near future.

    • Niels says:

      Thanks for the feedback, Adrian. 🙂

      A fun little team name generator you have made out of it. Hope you’ll also enjoy the modifications you are planning. It’s there the real fun begins. 😀

  41. Kellylynn says:

    Hi! Thank you for putting these tutorials up! Just wanted to know if you will be implementing a tutorial on how to create a name generator app? (I’ve noticed that a lot of people are switching over to apps to get their…. stuff covered or done and thought it would be a better idea to invest my time in coming up with a Registered Horse Generator App. Common examples of AQHA (American Quarter Horse Association) registered names are but not limited to:

    Dash Ta Fame
    Frenchman’s Guy
    Doc Bar
    Freckles Playgun
    By Invitation Only
    Streaking Sixes
    Poco Bueno
    Truckle Feature
    Bugs Alive 75
    Impressive
    Dual Rey
    Peppy San Badger
    Bully Bullion

    Thank you for your time!

    • Kellylynn says:

      P.s. If you create a platform where we can adjust the outcome (customize our word lists), please do let me know as I’m more than willing to pay for that app. This could make you some money! 😀

    • Niels says:

      Hi Kelly. 🙂

      I’m sorry but I haven’t found the time to look into app developement yet. But if I ever do a mobile name generator will be the first app for sure.

  42. Lina says:

    Hi there! Love your script, and have found it to be amazing to use so far!

    I have a question I hope is simple!

    What would the code be if you don’t want a space between words? Like it takes the word “Black” from Wordlist A, and “Wind” from Wordlist B, and have it show up as “Blackwind”?

    Thank you again so much for your hard work!

Leave a Reply

Your email address will not be published. Required fields are marked *