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>
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.
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.
Thanks for the soluation. What does the
