Making different sizes of grids and want to change the size of them once user choose an option

Question

I'm making different sizes of magic square and want to gets the values that the sum of each colums, rows and diagonal lines are the same in Javascript.

Here is my code:

let values = document.querySelector('select').value;
window.boxes = document.querySelectorAll(".box")

function creategrid() {
  for (var i = 0; i < values.charAt(0); i++) {
    var rows = document.createElement('div');
    rows.className = 'row';
    for (var j = 0; j < values.charAt(0); j++) {
      var box = document.createElement('div');
      box.className = 'box';
      rows.appendChild(box);
    }
    document.getElementById('boxParent').appendChild(rows);
  }
}

function change() {
  //shows remove attribute not working and remove function not working
  //I have tried without '.' and with '.', but both of them doesn't work 
  boxes.removeAttribute('.row')
  boxes.removeAttribute('.box')
  boxes.remove(boxes);
  if (values.charAt(0) === '3') {
    creategrid()
    size3x3();
  } else if (values.charAt(0) === '4') {
    creategrid()
    size3x3();
  }
}
creategrid()

   

 .box {
      border: black 4px solid;
      background: white;
      opacity: 0.7;
      width: 175px;
      height: 150px;
      margin-top: 0px;
      cursor: pointer;
      float: left;
      display: inline-block;
    }
     .row {
          display: block;
          float: left;
          width: 100%;
        }

   

     <div id="boxParent"></div>
        <form>
          <label>Choose a Size:</label>
          <select onchange='change()'>
            <option>3 X 3</option>
            <option>4 X 4</option>
            <option>5 X 5</option>
            <option>6 X 6</option>
            <option>7 X 7</option>
            <option>8 X 8</option>
            <option>9 X 9</option>
             
          </select>
        </form>

I have been struggled with this for a long time.

Every time I reload the page, it shows Uncaught TypeError: Cannot set properties of undefined (setting 'textContent').

I am not really sure why. Do anyone know why does this happens?

Also, I would like to make an advanced algorithem that will checking whether the sum of each colums, rows and diagonal lines are the same and I only need to make 1 function in all

Curreently, I have to make every check function for every size of grid which is so annoying.

For the creategrid(), it only works for 3x3 and 4x4 size.

My code has several problem. Do anyone have a better version of doing this?

Thanks very much for any help and responds!

Answer 1

If you want the old grid to disappear, I think one way is to clear content inside boxParent at event change(). Also get value from select each time you call creategrid():

let boxParent = document.getElementById("boxParent");

function creategrid() {
  // Get curent select value 
  let values = document.querySelector('select').value;

  // Create grid from select value
  for (var i = 0; i < values.charAt(0); i++) {
    var rows = document.createElement('div');
    rows.className = 'row';
    for (var j = 0; j < values.charAt(0); j++) {
      var box = document.createElement('div');
      box.className = 'box';
      rows.appendChild(box);
    }
    document.getElementById('boxParent').appendChild(rows);
  }
}

function change() {
  // Clear all content inside boxParent and create grid again
  boxParent.innerHTML = "";
  creategrid();
}

creategrid();

.box {
  border: black 4px solid;
  background: white;
  opacity: 0.7;
  width: 100px;
  height: 100px;
  margin-top: 0px;
  cursor: pointer;
  float: left;
  display: inline-block;
}

.row {
  display: flex;
  float: left;
  width: 100%;
}

<div id="boxParent"></div>
<form>
  <label>Choose a Size:</label>
  <select onchange='change()'>
    <option>3 X 3</option>
    <option>4 X 4</option>
    <option>5 X 5</option>
    <option>6 X 6</option>
  </select>
</form>