Necesito hacer que mi código funcione. Creo que está completo, así que no puedo encontrar lo que falta. Como puede ver en mi CSS, quiero que sean cuadros con columnas de 1 a n y líneas de 1 a m. pero lo que aparece es un poco extraño.

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>

Esto es lo que quiero como resultado (esto es 5to5)

0
Noémie Carette 29 oct. 2017 a las 17:16

3 respuestas

La mejor respuesta

Nunca debe usar document.write() en su código. El problema es que cuando ejecuta document.write después de que el documento se ha cargado, sobrescribe todo el documento. Si se ejecuta antes de eso, no lo sobrescribe. Debido a eso, su css no funciona. En lugar de eso deberías hacer algo como esto

Y lea ¿Por qué document.write se considera una "mala práctica"?

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>
0
Sanchit Patiyal 29 oct. 2017 a las 14:55

Si ejecuto su fragmento, las columnas se muestran una debajo de la otra, mirando la ventana de DevTools, lo único que puedo encontrar es un problema con su declaración de hoja de estilo en el HTML. Sin el CSS se ve así: Sin ejemplo de CSS

Cuando agrego el CSS manualmente, se ve así: Con ejemplo de CSS

Mi consejo sería echar otro vistazo a cómo agrega su CSS a su página web.

2
Koen van Zuijlen 29 oct. 2017 a las 14:37

document.write("<br>") reemplaza el contenido de su documento actual, eliminando así su CSS. En su lugar, use appendChild para crear el salto de línea.

Código fijo:

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>
0
H77 29 oct. 2017 a las 14:49