Estoy creando un tablero de sudoku y necesito dibujar algunas líneas para dividir las cajas de 3x3. El tablero está hecho de botones, así que lo que intento hacer es cambiar el color del borde de los botones en la tercera y sexta columna y línea.
El problema al que me enfrento es que no puedo agregar en un botón 2 bordes: derecho e inferior. El código Js solo agrega un atributo a la vez, usando elem.setAttribute . Así que probé una función que supuestamente te permite agregar más de 1 atributo, pero parece que no funciona.
¿Dónde está el bicho?
function createGameboard() { var gameboard = document.getElementById("gameboard"); console.log("creating buttons"); for (var i = 1; i <= 9; i++) { for (var j = 1; j <= 9; j++) { var button = document.createElement("button"); button.id = i + "-" + j; button.className = "buttons"; button.innerHTML = i + "-" + j; if (i == 3 || i == 6) { button.setAttribute("style", "border-bottom: 4px solid black"); } if (j == 3 || j == 6) { button.setAttribute("style", "border-right: 4px solid black"); } if ( (i == 3 && j == 3) || (i == 6 && j == 6) || (i == 3 && j == 6) || (i == 6 && j == 3) ) { setAttributes(button, { "border-right": "4px solid black", "border-bottom": "4px solid black", }); } gameboard.appendChild(button); } } } createGameboard(); function setAttributes(el, attrs) { for (var key in attrs) { el.setAttribute(key, attrs[key]); } } 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; border: 3px solid gray; 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>Si solo usa setAttribute para diseñar, podría arreglarlo así:
function setAttribute(element, key, value) { element.style[key] = value } setAttribute(document.body, "backgroundColor", "red")Tenga en cuenta que debe usar la versión javascript de estilo (backgroundColor en lugar de background-color).
Es porque anulas el atributo. Tienes que concatenar los atributos. como eso:
const d = document.querySelector('button') console.log('before',d) d.setAttribute("style", "border-bottom: 4px solid green;") _tmp = d.getAttribute("style") d.setAttribute("style", _tmp + " border-right: 4px solid black") console.log('after', d) <button>1</button>Utilizo la función no solo para diseñar, sino también para agregar/eliminar clases.
const setAttributes = (el, object) => { for (let key in object) { if (key === "addClass") { el.classList.add(object[key]); } else if (key === "removeClass") { el.classList.remove(object[key]); } else { el.setAttribute(key, object[key]); } } };El uso es bastante simple:
setAttributes(cBtn, { class: `${this.prefix}-clear hidden`, type: "button", "aria-label": this.clearBtnAriLabel, });