Soy nuevo en JavaScript y necesito ayuda.
Estoy creando un tablero de sudoku usando varios botones. Quiero dibujar/colorear el borde de cada tercera línea y cada tercera columna, para evidenciar esos cuadros de 3x3. El problema es que cuando trato de obtener la identificación de cada botón, dice 'indefinido' y no puedo hacer lo que pretendía.
¿Qué estoy haciendo mal? ¿O cómo debo colorear esas líneas de las que estoy hablando?
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>Su función drawLines() es la raíz del problema aquí.
Como se indica en mi recomendación, getElementsByName devolverá undefined en esta instancia ya que no hay ningún elemento en el DOM con un atributo de nombre.
Un enfoque diferente que podría tomar sería darle a cada botón un nombre de clase y apuntarlos a todos usando getElementsByClassName , que luego puede recorrer, posiblemente usando un map o forEach .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
Para obtener cada tercer elemento en la matriz, considere usar el operador de módulo (%).
Consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder para obtener más información sobre el uso del módulo.