Why isn't my JavaScriptcode working with prompt and innerHTML?

Question

Im trying to make an online Role Playing Game, but my code is not working. It asks the user what they want their character to be named, and what race they want to be. It would then randomly choose some stats for them, and -- depending upon their race -- add and subtract from their stats.

    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

getStatFunction should be called with the race as argument or you should define the variable racePrompt outsite the function

Also, if you mean to make a player, a good idea should be have it as an object and use the nameAndRaceFunction like a constructor

Answer 2

racePrompt is defined inside the nameAndRaceFunction() function scope. It is not accessible outside of it. Further: you lower case it, so later I will check only for race not racePrompt .

One solution would be to make race global like 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 {

    }
  }