Search code examples
javascriptcssbuttongridundefined

Button's id undefinded, creating a gameboard in Js

I am new to JavaScript and need some help.

I am creating a sudoku gameboard using multiple buttons. I want to draw/color the border of every third line and every third column, to evidentiate those 3x3 boxes. The problem is when I try to get each button's ID it says 'undefined' and I can't do what I intended.

What am I doing wrong? Or how should I color those lines that I am talking about?

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>

Solution

  • Your drawLines() function is the root of the problem here.

    As stated in my commend, getElementsByName will return undefined in this instance as there is no element on the DOM with a name attribute.

    A different approach you could take would be to give every button a class name and target them all using getElementsByClassName, which you can then loop through, possibly using a map or forEach.

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

    In order to get every third element in the array, consider using the modulus operator (%).

    Please have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder for more information on usage of modulus.