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 do that 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 a 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:
- If there’s already a result it is removed
- Then a new div element to hold the result is created
- The name is added as a text node
- 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.
Want a review of your name generator?
Write a comment if you make a cool name generator with this script. I might very well write a review of it. 
Also remember to visit my name generators to see how I make superhero names with the superhero generator.
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.
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
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.
Pingback: Name generator script « Name Generators Blog
Pingback: Name generator widget « Name Generators Blog
Pingback: Name Generators Blog » Name randomizer
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?
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:
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.
How do i show the results in a text box?
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];
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.
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
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:
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:
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:
To show the challenge in an easy way you can do this:
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.
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
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.
Thanks Niels! Much appreciated.
Pingback: Save the names from the name generator in a list | Name Generators Blog
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)!
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.
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.
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.
This is very cool, but is there a way to actually have the people type in their names first and then click submit?
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.