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:
- 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.
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.
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–
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
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!
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
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 🙂
Thanks a lot David. Great you find it useful. 🙂
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
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”.
Niels,
Thank you very much, repaired and functional
Greetings to Denmark…
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
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
}
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
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.
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
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
Thanks again, Niels! I’ll play with it and let you know how it turns out!
I couldn’t sleep last night so I made this silly Outdoorsman Name Generator adapted from your code. http://robertivan.com/name.html
Haha. Funny idea. 🙂
/Niels aka ‘Buddy O’ Eagleclaw’
I love the script so much Niels, thanks for sharing – so simple, so quick!
Thanks, Clark. Great you found it useful.
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.
I apologize, I did not include the link.
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!
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];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
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.
I understand, thanks for the time you’ve already spent on this project!
Kai
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.
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}.
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 🙂
Hi Niels,
just want to say thank you for your great tutorial. It helped me a lot to create my website, myriadofnames.com.
Great you found it useful. Good luck with your project. 🙂
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
Cool use of the generator script, Jennifer. Good luck.
Thank you so much!
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.
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. 😀
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!
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! 😀
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.
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!
Is there anyway to get it to generate more than 1 name at a time?
Like generate a list of 10 or 20 names at a time. I really love this script and I have a huge list of descriptors and names for a dungeon name generator my friends use in our RPGs but i have so many words in the list that often I’ll get a name that doesn’t make sense so i have to keep clicking, it would greatly speed up the process if it made a larger list of names every click. Even if it can’t, it works great, and I can’t thank you enough, it’s enabled us to crank out a fictional world in a few hours at most, as opposed to weeks that it used to