Массив не определен

Мне нужно что бы создавался массив. Без функции идет как по маслу, а в функции выдает ошибку. Кучу всего перепробовал, не знаю что делать помогите пожалуйста вот код js:

var butt = document.getElementById("butt");
var tab = document.getElementById("tab");
function Create2dArray(){
var arra = new Array(3);

for (var i = 0; i < arra.length; i++) {
  arra[i] = new Array(3);
return
}}

console.log(arra);
Create2dArray(Datesystem)
//(true && false)
function DateSystem(x, y, arra){
butt.onclick = function(){
var x = +document.getElementById("x") 
var y = +document.getElementById("y")
arr.push(x.value)
arr.push(y.value)
 for (var f=0; f < x; f++) {
  var tr = document.createElement("tr")
  for (var g=0; g < y; g++) {
    var td = document.createElement("td");
    tr.className = "borders"
    td.className = "border"
    
    tr.appendChild(td);   
  }
  var cell = queryselectorAll('.border');
  for (var g = 0; g < cell.length; g++) {
  cell[g].addEventListener("click", function(event){
    this.cell.innerHTML = "X"
   });  
  }
  
  tab.appendChild(tr);
 }
}
}
DateSystem()
  



  

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="game.css">
</head>
<body>
    <h1>Ведите x и y чтобы сделать таблицу</h1>
    x:<input id="x" type="text">
    y:<input id="y" type="text">
    <button id="butt">Ввод</button>
    <table id="tab"></table>

</body>
<script type="text/javascript" src="code.js"></script>
</html>

  

Ответы (0 шт):