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

Question

我需要让我的代码工作。我认为他是完整的，所以我找不到缺少的东西。 正如您在我的 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)

Answer 1

如果我运行您的代码段，各列将显示在彼此下方，查看 DevTools 窗口时，我唯一能找到的是 HTML 中的样式表声明存在问题。没有 CSS 它看起来像这样:

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

我的建议是重新审视如何将 CSS 添加到网页。