Question

你们中的任何人都可以如此友好地帮助我找出为什么这不起作用吗？尝试在JavaScript中实现一个函数，每当我按下Submit时都会调用它。到目前为止，当我按提交时没有任何反应。

我在网页https://jsfiddle.net/aconyteds/aQJza/上找到了这个代码，所以我想尝试实现这个我自己/玩它并从中学习。但我无法弄清楚它为什么不起作用。

<html>
<head>
    <title>Choose your faction!</title>
    <script type="text/javascript">
(function(){
    function gId(s){return document.getElementById(s);}
    var character={
    faction:["Alliance", "Horde"],
    race:{"Alliance":["Dwarf","Gnome","Human","Night Elf","Dranei", "Worgen","Pandaren"], 
          "Horde":["Orc","Troll","Tauren","Undead","Blood Elf","Goblin","Pandaren"]},
    class:{"Dranei":["Death Knight","Hunter","Mage","Paladin","Priest","Shaman","Warrior","Monk"], 
           "Dwarf":["Death Knight","Hunter","Mage","Paladin","Priest","Rogue","Shaman","Warlock","Warrior","Monk"], 
           "Gnome":["Death Knight","Mage","Priest","Rogue","Warlock","Warrior","Monk"], 
           "Human":["Death Knight","Hunter","Mage","Paladin","Priest","Rogue","Warlock","Warrior","Monk"], 
           "Night Elf":["Death Knight","Druid","Hunter","Mage","Priest","Rogue","Warrior","Monk"],
           "Worgen":["Death Knight","Druid","Hunter","Mage","Priest","Rogue","Warlock","Warrior"], 
           "Blood Elf":["Death Knight","Hunter","Mage","Paladin","Priest","Rogue","Warlock","Warrior","Monk"],
           "Undead":["Death Knight","Hunter","Mage","Priest","Rogue","Warlock","Warrior","Monk"], 
           "Goblin":["Death Knight","Hunter","Mage","Priest","Rogue","Shaman","Warlock","Warrior"], 
           "Orc":["Death Knight","Hunter","Mage","Rogue","Shaman","Warlock","Warrior","Monk"], 
           "Tauren":["Death Knight","Druid","Hunter","Paladin","Priest","Shaman","Warrior","Monk"], 
           "Troll":["Death Knight","Druid","Hunter","Mage","Priest","Rogue","Shaman","Warlock","Warrior","Monk"],
           "Pandaren":["Warrior","Hunter","Rogue","Priest","Shaman","Mage","Monk"]},
    spec:{"Death Knight":["Blood","Frost","Unholy"],
          "Druid":["Balance","Feral","Guardian","Restoration"],
          "Hunter":["Beastmaster","Marksmanship","Survival"],
          "Mage":["Arcane","Fire","Frost"],
          "Monk":["Brewmaster","Mistweaver","Windwalker"],
          "Paladin":["Holy","Protection","Retribution"],
          "Priest":["Discipline","Holy","Shadow"],
          "Rogue":["Assassination","Combat","Subtlety"],
          "Shaman":["Elemental","Enhancement","Restoration"],
          "Warlock":["Affliction","Demonology","Destruction"],
          "Warrior":["Arms","Fury","Protection"]}
    };
    gId("Submit").onclick=function(){
        var c={faction:"",race:"",sex:"",class:"",spec:""};
        c.faction=gId("Faction").value==="Random"?_Select(character.faction):gId("Faction").value;
        c.race=_Select(character.race, c.faction);
        c.sex=_Select(["Male","Female"]);
        c.class=_Select(character.class, c.race);
        c.spec=_Select(character.spec, c.class);
        function _Select(obj,param){
            var t=param?obj[param]:obj;
            return t[Math.floor(Math.random()*t.length)]; 
        }
        gId("Output").innerHTML=c.faction+" "+c.sex+" "+c.race+" "+c.spec+" "+c.class;
    }
})();
    </script>
</head>
<body>
    <!-- <p id="mypara">demo</p>
<button type="button" onclick="funcClick()">Martin</button> -->

<p>World of Warcraft Random Character Selector.</p>
<p>Select your faction, then press submit to generate your random Character.</p>
<div>
    <select id="Faction">
        <option value="Random">Random</option>
        <option value="Alliance">Alliance</option>
        <option value="Horde">Horde</option>        
    </select>
    <button id="Submit">Submit</button>
</div>
<p id="Output"></p>
</body>
</html>

按下提交按钮时没有任何反应。

Answer 1

在加载文档的其余部分之前加载并运行脚本，因此按钮未加载且没有任何反应。要解决此问题，请考虑将代码放在正文标记的底部

Answer 2

将您的代码放在Document Ready Event中（即$(document).ready(function(){ //Your code will be here});，以便DOM准备好注册事件

或

将所有脚本放在DOM主体

之后

调用JS函数不起作用

2 个答案: