javascript - 制作不同大小的网格，并希望在用户选择一个选项后更改它们的大小

Question

我正在制作不同大小的幻方，并希望在 Javascript 中获得每个列、行和对 Angular 线的总和相同的值。

这是我的代码:

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>

这个问题困扰我好久了。

每次我重新加载页面时，它都会显示Uncaught TypeError: Cannot set properties of undefined (setting 'textContent')。

我不太确定为什么。有谁知道为什么会这样？

此外，我想做一个高级算法来检查每个列、行和对 Angular 线的总和是否相同，我只需要总共制作 1 个函数

目前，我必须为每种尺寸的网格检查函数，这很烦人。

对于 creategrid()，它仅适用于 3x3 和 4x4 尺寸。

我的代码有几个问题。有人有更好的版本吗？

非常感谢您的帮助和回复!

Answer 1

如果您希望旧网格消失，我认为一种方法是在 change() 事件中清除 boxParent 中的内容。每次调用 creategrid() 时也会从 select 中获取值:

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>