我是 JavaScript 新手，需要一些幫助。
我正在使用多個按鈕創建數獨游戲板。我想繪制/著色每第三行和每第三列的邊框，以證明那些 3x3 框。問題是當我嘗試獲取每個按鈕的 ID 時，它顯示為“未定義”，而我無法按照我的意圖進行操作。
我究竟做錯了什么？或者我應該如何為我正在談論的那些線條著色？
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>uj5u.com熱心網友回復：
您的drawLines()功能是這里問題的根源。
正如我的推薦中所述，getElementsByName在這種情況下將回傳 undefined ，因為 DOM 上沒有具有 name 屬性的元素。
您可以采取的另一種方法是給每個按鈕一個類名并使用 來定位它們getElementsByClassName，然后您可以回圈遍歷，可能使用 amap或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了解有關模數使用的更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/421960.html
標籤：
上一篇：discord_componentsdiscord.py知道哪個用戶點擊了按鈕
下一篇：檢測按下了什么按鈕