Button的id未定义，在Js中创建一个游戏板

Question

我是 JavaScript 的新手，需要一些帮助。

我正在使用多个按钮创建一个数独游戏板。我想 draw/color 每三行和每三列的边框，以证明那些 3x3 框。问题是，当我尝试获取每个按钮的 ID 时，它显示 'undefined' 而我无法按预期进行。

我做错了什么？或者我应该如何为我正在谈论的那些线条着色？

function createButtons() {
  var gameboard = document.getElementById("gameboard");
  for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= 9; j++) {
      var button = document.createElement("button");
      button.id = i + "." + j;
      button.innerHTML = "cell " + i + "-" + j;
      gameboard.appendChild(button);
    }
  }
}

function drawLines() {
  var button = document.getElementsByName("button");
  for (var i = 1; i <= 81; i++) {
    if (button.id == 3 + "." + i || button.id == 6 + "." + i) {
      button.style.border.bottom = "5px solid red"; //I don't know if this is correct
    }
    if (button.id == i + "." + 3 || button.id == i + "." + 6) {
      button.style.border = "5px";
      button.style.border.right = "solid yellow";
    }
  }
}

createButtons();
drawLines();

body {
  background-color: #0f4c5c;
}

h1,
h5 {
  color: white;
}

.sudoku #gameboard {
  width: 40vmin;
  height: 40vmin;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
}

.sudoku button {
  width: 10vmin;
  height: 10vmin;
  background: white;
  margin: 0;
}

<body>
    <div class="container">
      <div class="col">
        <h1 class="row mx-auto my-3" id="title">
          Sudoku
        </h1>
        <div class="row my-2 container sudoku">
          <div class="gameboard" id="gameboard"></div>
        </div>
        </div>
      </div>
    </div>
</body>

Answer 1

您的 drawLines() 函数是问题的根源。

如我的建议所述，getElementsByName 在此实例中将 return 未定义，因为 DOM 上没有具有名称属性的元素。

您可以采取的另一种方法是为每个按钮指定一个 class 名称，然后使用 getElementsByClassName 将它们全部定位，然后您可以循环遍历，可能使用 map或 forEach.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

为了获取数组中的每三个元素，请考虑使用取模运算符 (%)。

请查看 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder 以获取有关模数用法的更多信息。

Button的id未定义，在Js中创建一个游戏板

Button's id undefinded, creating a gameboard in Js

javascript

css

grid

button

undefined