javascript - 为什么我的价值观未定义？

Question

我做了一个像字链这样的游戏。我有一个包含城市名称的数组。

如果我打开页面，用户可以看到一个随机字母和带按钮的输入框。

他必须带着同样的字母进城。但现在我有错误和未定义的值。

我有开始信，如果我打开该页面，我会看到：

    var rand = generateRandom(rand);
    LettersDiv.innerHTML = ab[rand];

我有当我点击按钮时调用的函数：

 function turnRound(e,myUser, myBot){
        var myChoise;
        myChoise = document.getElementById("city").value; //input box
        var botData = searchWord(ab[rand]); //city in array
        ab.splice(rand, 1); //alphabeta
        if(botData !== null) resultDiv.innerHTML += botData + '<br>';
        if(myChoise !== null) resultDiv.innerHTML += myChoise + '<br>';
        var rand = generateRandom(rand);
        LettersDiv.innerHTML = ab[rand];
        e.preventDefault();
    }

但 botData 的值为 0 而不是城市。该怎么办？

完整代码：https ://plnkr.co/edit/NN8XnORn45CIx4XT6HNd?p=preview

var city_str = "Абаза,Абакан,Абдулино,Абинск,Агидель,Агрыз,Адыгейск,Азнакаево,Азов,Аксай,Алагир,Алапаевск,Алатырь,Алдан,Алейск,Александров,Аша,Бабаево,Бабушкин,Бавлы,Багратионовск,Байкальск,Баймак,Бакал,Баксан,Балабаново,Балаково,Балахна,Балашиха,Балашов,Балей,Балтийск,Барабинск,Барнаул,Барыш,Батайск,Бахчисарай,Бежецк,БелаяКалитва,БелаяХолуница,Белгород,Белебей,Белинский,Белово,Белогорск,Белогорск,Белозерск,Белокуриха,Беломорск,Белорецк,Белореченск,Белоусово,Борисоглебск,Боровичи,Боровск,Бородино,Братск,Бронницы,Брянск,Бугульма,Бугуруслан,Будённовск,Буинск,Буй,Бутурлиновка,Валдай,Валуйки,ВеликиеЛуки,ВеликийНовгород,ВеликийУстюг,Венёв,Верещагино,Верхнеуральск,ВерхнийТагил,ВерхнийУфалей,Владивосток,Владикавказ,Владимир,Волгоград,Волгодонск,Воркута,Воронеж,Ворсма,Воскресенск,Воткинск,Всеволожск,Вуктыл,Выборг,Выкса,Высоковск,Высоцк,Вытегра,Вяземский,Вязники,Вязьма,ВятскиеПоляны";
var city = city_str.split(',');

var ab = ["А", "Б", "В", "Г", "Д", "Е", "Ж", "З", "И", "Й", "К", "Л", "М", "Н", "О", "П", "Р", "С", "Т"];

var LettersDiv = document.getElementById('letter');
var resultDiv = document.getElementById('result');
var playBtn = document.getElementById('play');

if (document.getElementById('myForm')) {
  document.getElementById('myForm').addEventListener('submit', turnRound, false);
}


function user(countCity, countRiver, count) {
  this.countCity = countCity;
  this.countRiver = countRiver;
  this.count = countCity;
}


function searchWord(letter) {
  //letter = letter.toUpperCase();
  return city.find(n => n[0] == letter) || 0;
}

function generateRandom(rand) {
  if (rand >= ab.length) return rand = ab.length
  else
    return rand = 0 + Math.floor(Math.random() * (ab.length));

}

var rand = generateRandom(rand);
LettersDiv.innerHTML = ab[rand];

function turnRound(e, myUser, myBot) {
  var myChoise;
  myChoise = document.getElementById("city").value;


  //LettersDiv.innerHTML = ab[rand];

  alert(rand);

  var botData = searchWord(ab[rand]);

  ab.splice(rand, 1);

  if (botData !== null) resultDiv.innerHTML += botData + '<br>';
  if (myChoise !== null) resultDiv.innerHTML += myChoise + '<br>';


  //

  var rand = generateRandom(rand);
  LettersDiv.innerHTML = ab[rand];


  /* if (myChoise == botData) {
       myUser.countCity += 5;
       myBot.countCity += 5;
   }
   else if (myChoise != botData) {
       myUser.countCity += 10;
       myBot.countCity += 10;
   }
   else if (trim(myChoise) == '') {
       myBot.countCity += 15;
   }
   else myUser.countUser += 15; */


  e.preventDefault();
}

<form id="myForm">
  <div id="letter"></div>
  <input type="text" value="" id="city">
  <button type="submit" id="play">Submit</button>
  <div id="result"></div>
</form>

标签： javascript

Answer 1

显然，变量rand是在函数中声明之前使用的，如果在函数中声明了变量，无论在函数的哪个位置声明语句，它都会忽略函数范围之外的声明，因此在第一次调用时不会赋值.

hoisting
- 提升是一种 JavaScript 机制，其中变量和函数声明在代码执行之前被移动到其范围的顶部。

参考变量提升

尝试

function turnRound(e,myUser, myBot){
        var myChoise;
        var rand = generateRandom();
        myChoise = document.getElementById("city").value; //input box
        var botData = searchWord(ab[rand]); //city in array
        LettersDiv.innerHTML = ab[rand];
        ab.splice(rand, 1); //alphabeta
        if(botData !== null) resultDiv.innerHTML += botData + '<br>';
        if(myChoise !== null) resultDiv.innerHTML += myChoise + '<br>';
        rand = generateRandom(rand);
        LettersDiv.innerHTML = ab[rand];
        e.preventDefault();
    }