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.
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.
Well seriously… if you need help just ask your questions below. I’ll try my best to help you.