Tmp is undefined

1

Hello all. I’m working on my tic tac to game, and one of my variables is not being recognized after the button is being clicked for the first time. The variable that is breaking is tmp, but I can’t find any bugs with my code. Someone please help.

<!-- Reference the plugins -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://use.fontawesome.com/6a26d6855f.js"></script>
<link href="/hover/css/hover.css" />
<link href="/hover/css/hover-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<!-- Reference above this line -->





<script>
$(document).ready(function () {
  var player = "X";
  var computer = "O";
$('.exes').click(function () {
  player = "X";
  computer = "O";
  console.log(player, computer);
  $('.exes').attr('class', 'colored');
  $('.os').removeAttr('class', 'colored');
});
$('.os').click(function () {
  player = "O";
  computer = "X";
    console.log(player, computer);
  $('.os').attr('class', 'colored');
  $('.exes').removeAttr('class', 'colored');
});
//Check Number Function so that Points Don't overlap
  function check() {
  for (var i = 0; i<playerArray.length; i++) {
    for(var j = i+1; j<computerArray.length; j++) {
    if (tmp === playerArray[i] || tmp === computerArray[j]) {
      tmp = response();
      console.log(tmp);
      check();
    } else {
      return;
    }
  }
  }
  }
  //--------------------------------
var winCombos = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 4, 8],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [6, 4, 2]
];
var playerArray = [];
var computerArray = [];
var choices = [".one",".two",".three", ".four", ".five", ".six", ".seven", ".eight", ".nine"];
var response = function() {return Math.floor(Math.random() * 8);};
$('.start').click(computersResponse());
function computersResponse() {
  var tmp = response();
  $('.one').click(function () {
    playerArray.push(0);
    $('.one').text(player);
    tmp = response();
    check();
    $(choices[tmp]).text(computer);
    $(choices[tmp]).attr('class', 'coloredWhite');
    computerArray.push(tmp);
    console.log(computer)
    computersResponse();
  });
  $('.two').click(function () {
    playerArray.push(1);
    $('.two').text(player);
    tmp = response();
    check();
    $(choices[tmp]).text(computer);
    $(choices[tmp]).attr('class', 'coloredWhite');
    computerArray.push(tmp);
    console.log(computer)
    computersResponse();
  });
  $('.three').click(function () {
    playerArray.push(2);
    $('.three').text(player);
    tmp = response();
    check();
    $(choices[tmp]).text(computer);
    $(choices[tmp]).attr('class', 'coloredWhite');
    computerArray.push(tmp);
    console.log(computer);
    computersResponse();
  });
  $('.four').click(function () {
    playerArray.push(3);
    $('.four').text(player);
    tmp = response();
    check();
    $(choices[tmp]).text(computer);
    $(choices[tmp]).attr('class', 'coloredWhite');
    computerArray.push(tmp);
    console.log(computer)
    computersResponse();
  });



  };





});

</script>



<style>
body {
  background-color: rgb(56, 56, 56);
  height: 2000px;
}

.game {

  padding-top: 30px;
  height: 1075px;
  width: 1015px;
}

.selections {
  height: 300px;
  width: 300px;
  margin-left: 20px;
  margin-top: 20px;
  background-color: rgb(120, 255, 0);
  font-size: 200px;
  font-family: "Press Start 2P";
  text-align: center;
  padding-left: 45px;
  padding-top: 15px;
  color:rgb(56, 56, 56);

}
h2 {
  font-family: "Pacifico";
  font-size: 50px;
  color: rgb(255, 255, 255);
  text-align: center;
}
h3 {
  overflow: auto;
}
.letterSelection {
  text-align: center;
  font-family: "Press Start 2P";
  color: white;
  font-size: 100px;
}
a, a:hover, a:focus {
  color: inherit;
  text-decoration: none;
}
a.exes:hover, a.os:hover {
  color: rgb(120, 255, 0);
}
h4 {
  text-align: center;
  color: white
}
button {
  border-radius: 4px;
  background-color: rgb(120, 255, 0);
  border-color: inherit;
  border-style: solid;
  height: 100px;
  width: 300px;
  text-align: center;
  margin-left: 340px;
}
.colored {
  color: rgb(120, 255, 0);
}
.coloredWhite {
  color: white;
}
</style>




<html>



<div class="container game">
<h2>Player v.s CPU Tic-Tac-Toe</h2>
<h4>Slect Which Letter You Prefer</h4>
<div class="letterSelection">
  <a class="exes col-xs-6">X</a><a class="os col-xs-6">O</a>
</div>
<div class="mainGame">
<button class="start text-center" type="submit">Start Game</button>
<div class = "buttons">
<div class="selections col-md-4"><a href=" " onclick="return false" class="one">&nbsp;</a></div>
<div class="selections col-md-4"><a href ='' onclick="return false" class="two"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="three"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="four"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="five"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="six"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="seven"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="eight"> &nbsp;</a></div>
<div class="selections col-md-4"><a href ="" onclick="return false" class="nine"> &nbsp;</a></div>
</div>
</div>
</div>


</html>
2

You declared tmp inside a function. That means that tmp only exists (“is defined”) inside that function.