为什么我的 JavaScript 代码不能使用 prompt 和 innerHTML？

Question

我试图制作一个在线角色扮演游戏，但我的代码不起作用。它询问用户他们希望他们的角色被命名为什么，以及他们想成为什么种族。然后它会随机为他们选择一些统计数据，并根据他们的种族从他们的统计数据中加减。

    var nameAndRaceFunction = function(){       
        var namePrompt = prompt("What shall you name your character?");
        var racePrompt = prompt("What race shall your character be? Please spell it correctly, with no capitals.");             
        var race = racePrompt.toLowerCase();
        var totalSentence = namePrompt + " the " + race;
        document.getElementById("nameAndRace").innerHTML = totalSentence;
    }
    var str = Math.floor((Math.random() * 10) + 1);
    var int = Math.floor((Math.random() * 10) + 1);
    var hlth = Math.floor((Math.random() * 10) + 1);
    var dext = Math.floor((Math.random() * 10) + 1);
    var getStatFunction = function(){
        if(racePrompt === "elf"){
            elfStats();
        }else if(racePrompt === "dwarf"){
            dwarfStats();
        }else if(racePrompt === "man"){
            manStats();
        }else{
        }
    }
       var elfStats = function(){
           var elfStr = str;
           var elfInt = int + 1;
           var elfHlth = (hlth - 1)*10;
           var elfDext = dext + 1;
           document.getElementById("strength").innerHTML = elfStr;
           document.getElementById("intelligence").innerHTML = elfInt;
           document.getElementById("health").innerHTML = elfHlth;
           document.getElementById("dexterity").innerHTML = elfDext;
       }
       var manStats = function(){
           var manStr = str + 2;
           var manInt = int;
           var manHlth = (hlth - 1) * 10;
           var manDext = dext;
           document.getElementById("strength").innerHTML = manStr;
           document.getElementById("intelligence").innerHTML = manInt;
           document.getElementById("health").innerHTML = manHlth;
           document.getElementById("dexterity").innerHTML = manDext;
       }
       var dwarfStats = function(){
           var dwarfStr = str + 1;
           var dwarfInt = int;
           var dwarfHlth = (hlth + 1) * 10;
           var dwarfDext = dext - 1;
           document.getElementById("strength").innerHTML = dwarfStr;
           document.getElementById("intelligence").innerHTML = dwarfInt;
           document.getElementById("health").innerHTML = dwarfHlth;
           document.getElementById("dexterity").innerHTML = dwarfDext;
       }

Answer 1

racePrompt是在nameAndRaceFunction()函数作用域内定义的。它无法在它之外访问。此外：你把它小写，所以稍后我将只检查race而不是racePrompt.

一种解决方案是使race像str、int、hlth、dext一样

全球化

  var nameAndRaceFunction = function() {
    namePrompt = prompt("What shall you name your character?");
    var racePrompt = prompt("What race shall your character be? Please spell it correctly, with no capitals.");
    race = racePrompt.toLowerCase();
    var totalSentence = namePrompt + " the " + race;
    document.getElementById("nameAndRace").innerHTML = totalSentence;
    getStatFunction()
  }
  var namePrompt, race; 
  var str = Math.floor((Math.random() * 10) + 1);
  var int = Math.floor((Math.random() * 10) + 1);
  var hlth = Math.floor((Math.random() * 10) + 1);
  var dext = Math.floor((Math.random() * 10) + 1);
  var getStatFunction = function() {
    if (race === "elf") {
      elfStats();
    } else if (race === "dwarf") {
      dwarfStats();
    } else if (race === "man") {
      manStats();
    } else {
    }
  }

Answer 2

getStatFunction应该以种族作为参数调用，或者你应该定义变量racePrompt outsite the function

另外，如果你想做一个玩家，一个好主意应该是把它作为一个对象，并使用nameAndRaceFunction像构造函数一样。