在for循环中带有for循环的函数两个变量都不能完全工作答案

【问题标题】：function with a for-loop in a for-loop both variable don't work completely在for循环中带有for循环的函数两个变量都不能完全工作
【发布时间】：2017-10-29 14:16:03
【问题描述】：

我需要让我的代码工作。我认为他是完整的，所以我找不到缺少的东西。正如您在我的 css 上看到的那样，我希望它是具有从 1 到 n 的列和从 1 到 m 的行的框。但是出现的东西有点奇怪。

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)

【问题讨论】：

标签： javascript html css variables for-loop

【解决方案1】：

如果我运行您的 sn-p，这些列将显示在彼此下方，查看 DevTools 窗口，我唯一能发现的是您在 HTML 中的样式表声明存在问题。如果没有 CSS，它看起来像这样：

当我手动添加 CSS 时，它看起来像这样：

我的建议是再看看如何将 CSS 添加到网页中。

【讨论】：

【解决方案2】：

你不应该在你的代码中使用document.write()。问题是当你在文档加载后运行document.write时，它会覆盖整个文档。如果它在此之前运行，它不会覆盖它。由于它，您的 css 无法正常工作。而不是你应该做这样的事情

请阅读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>

【讨论】：

【解决方案3】：

document.write("<br>") 替换您当前的文档内容，从而摆脱您的 css。而是使用appendChild 创建换行符。

固定代码：

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>

【讨论】：