making a magic square in javascript

Question

I am making a magic square in javascript.

Here is my code:

var output = {};
let getnums = () => {
  var numsarray = [];
  var arrays = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var len = arrays.length;
  while (xy > 0) {
    var rans = Math.floor(Math.random() * xy);
    numsarray.push(arrays[rans]);
    arrays.splice(rans, 1);
    len = len - 1;
  }

  return numsarray;
};

let done = false;
while (!done) {
  output = getnums();
  if (
    output[0] + output[1] + output[2] == 15
    && output[1] + output[4] + output[7] == 15
    && output[2] + output[5] + output[8] == 15
    && output[0] + output[3] + output[6] == 15
    && output[2] + output[4] + output[6] == 15
    && output[3] + output[4] + output[5] == 15
    && output[6] + output[7] + output[8] == 15
    && xyz[0] + xyz[4] + xyz[8] == 15
  ) {
    console.log('it works!!!');
    console.log(output);
    done = true;
  }
}

for (var i = 0; i < 3; i++) {
  var row = document.createElement('div');
  row.className = 'row';
  for (var j = 0; j < 3; j++) {
    var box = document.createElement('div');
    box.className = 'box';
    row.appendChild(box);
    for (var x = 0; x < 9; x++) {
      if (done) {
        //the problem is here
        var nums = document.createElement('div');
        box.appendChild(nums);
        nums.textContent = output[x];
      }
    }
  }
  document.getElementById('boxParent').appendChild(row);
}

.box {
  border: black 1.5px solid;
  background: white;
  opacity: 0.7;
  width: 175px;
  height: 150px;
  margin-top: 0px;
  cursor: pointer;
  float: left;
  display: inline-block;
  position: relative;
  left: 450px;
  top: 75px;
}

.row {
  display: block;
  float: left;
  width: 100%;
}

<div id="boxParent"></div>

I want the application to return the value as in the image. However, it return all the values from xyzs to each grid. I want the application to return one number for one grid.

.

Do anyone know what is wrong with my function and how to solve it?

Thanks for any helps and responds.

Answer 1

After you create your grid, then query the box elements and add your objects values using for in statement.

var xyz = {}
let getnums = () => {
  var xyzs = [];
  var arrays = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var xy = arrays.length;
  while (xy > 0) {
    var x = Math.floor(Math.random() * xy);
    xyzs.push(arrays[x]);
    arrays.splice(x, 1);
    xy = xy - 1;
  }
  return xyzs;
}

let done = false;
while (!done) {
  xyz = getnums();
  if (xyz[0] + xyz[1] + xyz[2] == 15 && xyz[1] + xyz[4] + xyz[7] == 15 &&
    xyz[2] + xyz[5] + xyz[8] == 15 && xyz[0] + xyz[3] + xyz[6] == 15 &&
    xyz[2] + xyz[4] + xyz[6] == 15 && xyz[3] + xyz[4] + xyz[5] == 15 &&
    xyz[6] + xyz[7] + xyz[8] ==
    15 && xyz[0] + xyz[4] + xyz[8] == 15) {
    done = true
  }
}

for (var i = 0; i < 3; i++) {
  var row = document.createElement('div');
  row.className = "row";
  for (var j = 0; j < 3; j++) {
    var box = document.createElement('div');
    box.className = "box";
    row.appendChild(box);
  }
  document.getElementById('boxParent').appendChild(row);
}

const boxes = document.querySelectorAll('.box');

for(let i in xyz){
    boxes[i].textContent = xyz[i]
}

.box {
  border: black 1.5px solid;
  background: white;
  opacity: 0.7;
  width: 175px;
  height: 150px;
  margin-top: 0px;
  cursor: pointer;
  float: left;
  display: inline-block;
  position: relative;
  left: 450px;
  top: 75px;
}

.row {
  display: block;
  float: left;
  width: 100%;
}

<div id="boxParent"></div>

Answer 2

One of the ways:

let xyz = {}
let getnums = ()=>{
  const xyzs = [];
  const arrays = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  let xy = arrays.length;
  while (xy > 0) {
     const x = Math.floor(Math.random() * xy);
     xyzs.push(arrays[x]);
     arrays.splice(x, 1);
     xy = xy - 1;
  }
  return xyzs;
}
let done = false;
  while(!done){
     xyz = getnums();
     if (xyz[0] + xyz[1] + xyz[2] == 15 && xyz[1] + xyz[4] + xyz[7] == 15 && 
     xyz[2] + xyz[5] + xyz[8] == 15 && xyz[0]+xyz[3]+xyz[6] == 15 && 
    xyz[2]+xyz[4]+xyz[6] == 15 &&xyz[3]+xyz[4]+xyz[5] == 15 && 
    xyz[6]+xyz[7]+xyz[8] == 15 && xyz[0]+xyz[4]+xyz[8] == 15){
    done = true
  }
}
for (let i = 0; i < 3; i++) {
  const row = document.createElement('div');
  row.className = "row";
  for(let j = 0;j<3;j++){
    const box = document.createElement('div');
    box.className = "box";
    row.appendChild(box); 
  }
  document.getElementById('boxParent').appendChild(row);
}
const boxes = document.querySelectorAll('.box')
for (let i = 0; i < 9; i++) {
  boxes[i].innerHTML = xyz[i]
}

.box {
  border: black 1.5px solid;
  background: white;
  opacity: 0.7;
  width: 175px;
  height: 175px;
  margin-top: 0px;
  cursor: pointer;
  /*float: left;*/
  display: inline-grid;
  align-items: center;
  font-size: 5em;
  position: relative;
  left: 50px;
  top: 50px;
  text-align: center;
}
.row {
  display: block;
  float: left;
  width:100%;
}

<div id="boxParent"></div>