function with a for-loop in a for-loop both variable don't work completely

Question

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>

This is what i want as result (this is 5to5)

score 2 · Answer 1 · answered Oct 29 '17 at 14:37

If I run your snippet, the columns are displayed underneath each other, looking at the DevTools window the only thing I can find is a problem with your stylesheet declaration in the HTML. Without the CSS it looks like this:

When I add the CSS manually it looks like this:

My advice would be to take another look at how you add your CSS to your webpage.

score 0 · Answer 2 · answered Oct 29 '17 at 14:49

document.write("<br>") replaces your current document content thereby getting rid of your css. Instead use appendChild to create the line break.

Fixed code:

function variableBox() {
  let body = document.querySelector("body");
  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";
      }
      body.appendChild(box);
    }
    body.appendChild(document.createElement("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>

score 0 · Accepted Answer · answered Oct 29 '17 at 14:55

You should never use document.write() in your code.The issue is that when you run document.write after the document has loaded, it overwrites the entire document. If it is run before that, it does not overwrite it.. Due to it, your css is not working. Instead of that you should do something like this

And do read Why is document.write considered a “bad practice”?

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.body.appendChild(box);
            
        }
        document.body.appendChild( document.createElement("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>

function with a for-loop in a for-loop both variable don't work completely

3 Answers3