javascript - 在页面上放置一个随机生成器脚本 - 它可以工作。添加另一个具有不同名称的名称 - 不起作用

Question

有人可以告诉我我做错了什么吗？我有一个函数，可以从两个列表(形容词列表和名词列表)创建随机名称，然后将它们组合起来创建随机名称。因此，它工作得很好。

但是我想在同一页面添加另一个名称生成器，该生成器只是从列表中随机选择一个名称并在单击按钮时显示它。所以我复制了第一个函数并更改了名称(函数名称、结果、占位符)。当我将两者都添加到页面时，两者都不起作用。

相同的功能显示两次，但第一个将两个单词组合成一个名称，第二个只是从列表中随机选择一个名称并显示它。

由于我更改了第二个函数的名称，我认为它应该可以正常工作。我不知道为什么添加第二个函数会使第一个函数(以及第二个函数)不起作用。

请在这里查看我的jsfiddle:jsfiddle 2 different name generators

第一个函数是:

function generator(){

            var wordlist1 = ["Cool","Masked","Tricky","Lovely","Big","Einstein","White","Rotten",
                            "Blue","Black","Fancy","Red","Purple","Golden","Silver", "Queen", "King", "Gentle", "Tiny", "Teeny", "Silly", "Naughty", "Dear", "Sugar", "Sweet",
                            "Agile", "Amazing", "Awesome", "Dainty", "Bright", "Noisy", "Nosy", "Quick", "Quiet", "Sassy", "Saucy", "Sharp", "Timid", "Touchy", "Snazzy", "Pretty", "Lazy",
                            "Spirited", "Flaky", "Flashy", "Elfin", "Fiery", "Ferocious", "Bubbly", "Fussy", "Fiery", "Funny", "Gentle", "Gloomy", "Good", "Grouchy", "Crabby", "Cool", "Cranky", "Curious", "Hearty", "Hot-headed", "Electric", "Master"  ];

            var wordlist2 = ["Cavy","Moose","Llama","Duck","Bear","Eagle","Tiger",
                            "Rocket","Bullet","Knee","Foot","Hand", "Yuki", "Aspen", "Tut", "Apollo", "Bandit", "Smokey", "Misha", "Snow", "Snowball", "Lord", "Prince", "Princess",
                            "Giant", "Dwarf", "Sally", "Bee", "Star", "Dragon", "Buddy", "Lady", "Urchin", "Champion", "Cherub", "Oreo", "Soul", "Guy", "Emir", "Earl", "Admiral",
                            "Baron", "Baroness", "Bishop", "General", "Chief", "Emperor", "Majesty", "Master", "Boss", "Captain", "Duchess", "Skipper", "Czar", "Tyrant", "Raja", "Dame",
                            "Colonel", "Khan", "Knight", "Duke", "Jewel", "Mate"  ];

            // Random numbers are made 
            var randomNumber1 = parseInt(Math.random() * wordlist1.length);
            var randomNumber2 = parseInt(Math.random() * wordlist2.length);
            var name = wordlist1[randomNumber1] + " " + wordlist2[randomNumber2];           

            //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(name));
            document.getElementById("placeholder").appendChild(element);
        }       

因此，对于第二个，我只是更改了名称(从生成器更改为整个生成器)，删除了“+”“+ wordlist2[randomNumber2]”部分(因为我只使用一个单词来表示这些名称，而不是组合两个单词) )，并将“onclick Generator()”和“onclick”wholegenerator()”添加到相应的按钮。

为什么这两个功能不能在同一页面上一起工作？

Answer 1

这是一个新的jsFiddle说明解决方案的工作原理。通过认识到 JavaScript 代码仅在 DOM 加载后才加载，这个难题就解决了。当您使用全局函数时，必须确保在处理引用函数的 HTML 之前定义函数。

function generator() {
    // Add your own words to the wordlist. Be carefull to obey the showed syntax
    ...

将此脚本移至头部即可使其工作。