Name Generators Blog

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:

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.

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.