为什么我的值未定义?

时间:2018-07-26 12:41:45

标签: javascript

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

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

他必须用相同的字母进入城市。但是现在我有错误和未定义的值。

我有一封开始信,如果打开该页面,我会看到它:

    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>

1 个答案:

答案 0 :(得分:0)

显然,变量hoisting在函数中声明之前就已使用,如果在函数中声明了Variables,则无论define语句位于函数的哪个位置,它将忽略函数范围之外的声明,因此它将第一次调用时未分配。

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(); }
  -提升是一种JavaScript机制,在执行代码之前,变量和函数声明会移至其作用域的顶部。

参考Variable hoisting

尝试

{{1}}