Nov 18, 2022

# Solution 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>``

# Solution 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>``

# Problem :

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.

### Comment posted by Dropout

I strongly recommend to start naming your variables so that they describe what data they hold – we shouldn’t play detectives and reverse engineer your script and you could be able to know what’s what when you see your code in two weeks.

### Comment posted by Shawn

Thanks for the soluation. What does the

MDN

### Comment posted by dale landry

Basically I do not have to assign a key