Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Multiple javascript generators on one page?

    Let me precede my question by stating that I'm a pretty helpless newbie when it comes to coding. I'm attempting to teach myself, but progress is slow going. Sorry about that!

    I made a couple of random name generators in java script a couple of months ago. They're currently on separate pages, but I'd like to combine them to a single page, and then have users toggle between the generators by using radio buttons. My first question: Is that possible? Which is closely followed by: How would I do that, assuming it can be done?

    Here's a snippet of my current code, if that helps:
    Code:
    <script type="text/javascript">		
    		function generator(){
    			   
    var wordlist1 = ["Amber","Aurora", ... ]
    var wordlist2 = ["Amber","Aurora," ... ]
    var wordlist3 = ["Fire","Fire's", ... ]
    var wordlist4 = ["Fire","Fire's", ... ]
    var wordlist5 = ["Air","Alcove", ... ]
    var wordlist6 = ["Air","Alcove", ... ]
    
    var i = parseInt(Math.random() * 3);
    
    if(i==0) {
    var name = wordlist1[parseInt(Math.random() * wordlist1.length)] + " of the " + wordlist4[parseInt(Math.random() * wordlist4.length)] + " " + wordlist6[parseInt(Math.random() * wordlist6.length)];
    }else if(i==1) {
    var name = wordlist2[parseInt(Math.random() * wordlist2.length)] + " of the " + wordlist3[parseInt(Math.random() * wordlist3.length)] + " " + wordlist6[parseInt(Math.random() * wordlist6.length)];
    }else if(i==2) {
    var name = wordlist2[parseInt(Math.random() * wordlist2.length)] + " of the " + wordlist4[parseInt(Math.random() * wordlist4.length)] + " " + wordlist5[parseInt(Math.random() * wordlist5.length)];
    
    }else{
    
    alert('error');
    
    }			
    
    			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);
    
    }
    
    </script>
    Basically, the code pulls words from the variable sets and smashes them together to create a name that has three parts. (They're names for a fantasy game, if anyone's curious.) The other generators I have use this same code, but have different words in the variable sets; for example, one is water-themed, another is darkness-themed. Like I said above, I'd like there to be buttons there for the user to click, selecting one generator over another.

    Thanks for any help! And if anything doesn't make sense, I'll happily clarify.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    If you pass the wordlists into the generator then you can have one function that can be used for all of the generators. The only other variables are the two ids so pass those to the function as well.

    Also you seem to be incorrectly using parseInt where you ought to be using Math.floor - parseInt converts numbers from base 2 through base 36 to base 10 while Math.floor rounds the number down to the nearest integer.

    Code:
    <script type="text/javascript">		
    function generator(result,placeholder,wordlist1,wordlist2,wordlist3,wordlist4,wordlist5,wordlist6){
    var i, name;
    i = Math.floor(Math.random() * 3);
    if(i==0) {
    name = wordlist1[Math.floor(Math.random() * wordlist1.length)] + " of the " + wordlist4[Math.floor(Math.random() * wordlist4.length)] + " " + wordlist6[Math.floor(Math.random() * wordlist6.length)];
    }else if(i==1) {
    name = wordlist2[Math.floor(Math.random() * wordlist2.length)] + " of the " + wordlist3[Math.floor(Math.random() * wordlist3.length)] + " " + wordlist6[Math.floor(Math.random() * wordlist6.length)];
    }else if(i==2) {
    name = wordlist2[Math.floor(Math.random() * wordlist2.length)] + " of the " + wordlist4Math.floor(Math.random() * wordlist4.length)] + " " + wordlist5[Math.floor(Math.random() * wordlist5.length)];
    }else{
    alert('error');
    }			
    
    			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);
    
    }
    
    generator('result','placeholder',
    ["Amber","Aurora", ... ],
    ["Amber","Aurora," ... ],
    ["Fire","Fire's", ... ],
    ["Fire","Fire's", ... ],
    ["Air","Alcove", ... ],
    ["Air","Alcove", ... ]);
    </script>
    Now you can simply include additional calls to generator() in the same page specifying the two ids and six arrays you want the extra calls to use.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Thank you so much for getting back to me and for your help! I've changed the parseInt(Math.random() to Math.floor(Math.random() - Thanks for correcting that.

    I really appreciate your code example, but I'm still not entirely sure I understand. So I can add all my other wordlists, just give them new names (like wordlist7, wordlist8, etc), and then change the actual code of generating the name to reflect these changes. Which would mean the new code looks like this:
    Code:
    function generator(result,placeholder,wordlist1,wordlist2,wordlist3,wordlist4,wordlist5,wordlist6){
    					      
    var wordlist1 = ["Amber","Aurora", ... ]
    var wordlist2 = ["Amber","Aurora," ... ]
    var wordlist3 = ["Fire","Fire's", ... ]
    var wordlist4 = ["Fire","Fire's", ... ]
    var wordlist5 = ["Air","Alcove", ... ]
    var wordlist6 = ["Air","Alcove", ... ]
    
    
    var i = Math.floor(Math.random() * 3);
    
    if(i==0) {
    var name = wordlist1[Math.floor(Math.random() * wordlist1.length)] + " of the " + wordlist4[Math.floor(Math.random() * wordlist4.length)] + " " + wordlist6[Math.floor(Math.random() * wordlist6.length)];
    }else if(i==1) {
    var name = wordlist2[Math.floor(Math.random() * wordlist2.length)] + " of the " + wordlist3[Math.floor(Math.random() * wordlist3.length)] + " " + wordlist6[Math.floor(Math.random() * wordlist6.length)];
    }else if(i==2) {
    var name = wordlist2[Math.floor(Math.random() * wordlist2.length)] + " of the " + wordlist4[Math.floor(Math.random() * wordlist4.length)] + " " + wordlist5[Math.floor(Math.random() * wordlist5.length)];
    
    }else{
    
    alert('error');
    
    }			
    
    			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);
    
    }
    
    var wordlist7 = ["Albatross", ...];		
    var wordlist8 = ["Albatross", ...];
    var wordlist9 = ["Kelp's", ...];
    var wordlist10 = ["Kelp's", ...];
    var wordlist11 = ["Albatross", ...];
    var wordlist12 = ["Albatross", ...];
    
    var i = parseInt(Math.random() * 3);
    
    if(i==0) {
    var name = wordlist7[parseInt(Math.random() * wordlist7.length)] + " of the " + wordlist10[parseInt(Math.random() * wordlist10.length)] + " " + wordlist12[parseInt(Math.random() * wordlist12.length)];
    }else if(i==1) {
    var name = wordlist8[parseInt(Math.random() * wordlist8.length)] + " of the " + wordlist9[parseInt(Math.random() * wordlist9.length)] + " " + wordlist12[parseInt(Math.random() * wordlist12.length)];
    }else if(i==2) {
    var name = wordlist8[parseInt(Math.random() * wordlist8.length)] + " of the " + wordlist10[parseInt(Math.random() * wordlist10.length)] + " " + wordlist11[parseInt(Math.random() * wordlist11.length)];
    
    }else{
    
    alert('error');
    
    }			
    
    			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);
    
    }
    And then basically repeat that until all my wordlists are accounted for? I tested that at JSFiddle and didn't get a result, so I know I've messed up somewhere.

    And regarding the radio buttons - How do I attribute a radio-button choice to a certain generator?

    I apologize again for the convoluted nature of this issue. I think I have the sort of questions that are better asked verbally with someone in the same room rather than done part by part over a forum, but I don't know anyone who can code javascript.

    Thank you again for your help! I really, really, really appreciate it!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •