I need to make my code work. I think he is complete and so i can't find what is missing. As you can see on my css, i want it to be boxes with columns from 1 to n and lines from 1 to m. but what shows up is kind of strange.
function variableBox() {
let m = document.getElementById("lines").value;
let n = document.getElementById("columns").value;
for (let j = 0; j < m; j++) {
for (let i = 0; i < n; i++) {
let box = document.createElement("p");
box.innerHTML = i + 1;
if (i % 2 == 0 && j % 2 == 1 || j % 2 == 0 && i % 2 == 1) {
box.style.backgroundColor = "yellow";
box.style.color = "#000";
}
document.querySelector("body").appendChild(box);
}
document.write("<br>");
}
}
body{
margin: 20px;
background-color: white;
}
p{
background-color: black;
color: white;
padding: 20px;
width: 30px;
border: 2px solid white;
display: inline-block;
}
<input type="text" id="lines" placeholder="number of lines">
<input type="text" id="columns" placeholder="number of columns">
<button onclick="variableBox()">play</button><br>