Save the names from the name generator in a list

Got this comment from Tina:

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?

A great idea. A save list add some very cool functionality to the name generator and I use it on all my name generators. You can see an example here at my Business Name Generator.

The save list funtion

To save the names generated by the name generator script we simply just add the names to the HTML . It’s called DOM manipulation because we are altering the DOM (document object model). The DOM is in short all the HTML in a website. When your are using JavaScript to change the DOM it is done locally in the users browser and on the fly.So the the results are shown instantly.

There’s no waits and new request send to the server. But enough talk. Lets’ get down to it. Here’s the complete script to make  a save list:

function save(){
	var elem = document.createElement("div");			
	elem.setAttribute("class", "namelistName");
	var nameTextNode = document.createTextNode(name);

The script is very short and it’s actually also pretty simple. Here’s what’s going on:

In line one we define the save function
In line 2 we create a new div-tag and save it in the variable named elem
In line 3 we add a class atribute to the div-tag
In line 4 we create a text node which holds the created name for us.  We use the variable ‘name’ which is not declared in this function. It is declared in the name generator script. Se below. *
In line 5 we append our text node to the div element
In line 6 we append our newly created div-tag to a div tag with the id=”savepoint” in the HTML. So in order to make this work you have to create an empty div tag with the id=”savepoint”, where you want the list to show up in your HTML page.

*IMPORTANT: In the save function we use the  same variable:  ‘name’ as in the name generator function.  In the name generator script the ‘name’ variable is declared inside the name-generator function. We need to place this declaration outside of the function to make it a global variable that is available to both the name generator function and the above save function.

So when your are combing the save list script with the name generator script it should look like this:

<script type="text/javascript">var name;
function generator(){
      // Add your own words to the wordlist. Be carefull to obey the showed syntax
      var adjectives = ["Cool","Masked","Bloody","Lame"];
      ... etc. 
function save(){
      var elem = document.createElement("div");
      ... etc.

Now the name variable is global, and available in all JavaScript functions on this page.

Here you can see how you  Make a name generator.

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

5 Responses to Save the names from the name generator in a list

  1. Jared says:

    Hi Niels,
    Love your generator way too much.

    Got it running super-quick and easy but now that I’m trying to add a savelist, I’m running into problems.

    Any suggestions?

  2. Lewis says:

    hmm. Seems to only work when the second function is nested in the first function. Took me a bit to figure that out. Not sure why. I’m JavaScript illiterate. Trying to learn it.

    • Lewis says:

      Oh, I think I know. The button only references the first function. Is that it? Can you make the button reference two functions?

Leave a Reply to Lewis Cancel reply

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