我不确定为什么我的代码在单击提交按钮时没有拾取我的选择并将其附加到我的数组中。我收到以下错误...

“modals.js:103 Uncaught TypeError：无法在 submit_button.onclick 处读取 null 属性（读取“length”）”

我的代码在选择时将“按钮焦点”添加到 className。

我想获取这些选择并将其附加到我的数组中。

出于某种原因，它没有检测到任何带有“.btn.button-focus”类名的元素。

有什么想法吗？

var container = document.getElementById('my_dataviz');
var array = ["One", "Two", "Three", "Four", "Five", "Six",
  "Seven", "Eight", "Nine", "Ten"
]
let identifier = 0;
let SelectCount = 0;

array.forEach(element => {
  const button = document.createElement("button");
  button.className = "btn";
  button.id = element;
  button.value = element;
  button.type = "button";
  const text = document.createTextNode(element);
  button.appendChild(text);
  container.appendChild(button);
});

let btn = document.getElementsByClassName("btn");

for (let i = 0; i < btn.length; i++) {
  (function(index) {
    btn[index].addEventListener("click", function() {
      console.log("Clicked Button: " + index);

      let isPresent = false;

      this.classList.forEach(function(e, i) {
        if (e == "button-focus") {
          isPresent = true;
        } else {
          isPresent = false;
        }
      });

      if (isPresent) {
        this.classList.remove("button-focus");

        SelectCount -= 1;
        document.querySelectorAll('.btn').forEach(item => {
          if (!item.classList.value.includes('button-focus')) item.disabled = false
        })

      } else {
        this.classList.add("button-focus");

        SelectCount += 1;
        if (SelectCount > 2) {
          document.querySelectorAll('.btn').forEach(item => {
            if (!item.classList.value.includes('button-focus')) item.disabled = true
          })
        }
      }
    })
  })(i)
}

const dataResults = []

let results = document.querySelector('.btn.button-focus');
let submit_button = document.querySelector('.modal-btn');

submit_button.onclick = function() {
  for (let i = 0; i < results.length; ++i) {
    dataResults.push(results)
    console.log(results)
  }
}

:root {
--primary_orange: #fea501;
}
.my_dataviz {
    width: auto;
    height: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
}
.my_dataviz button {
    font-family: "walkway";
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 25px;
    background-color: Transparent;
    -webkit-tap-highlight-color: transparent;
    background-repeat:no-repeat;
    border: none;
    letter-spacing: 1.6px;
    margin: 10px;
    border: 1px solid transparent;
}
.my_dataviz button:hover {
    box-sizing: border-box;
    background-color: var(--primary_orange);
    color: var(--dark);
    font-weight: bold;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    /*box-shadow: var(--shadow);*/
}
.btn.button-focus {
    background-color: var(--primary_orange);
    color: var(--dark);
    font-weight: bold;
    border: 1px solid #000;
    border-radius: 5px;

}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 50px;
    align-items: center;
    text-align: center;
    background: var(--primary_med);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.modal-footer .modal-btn {
    font-family: "walkway";
    font-size: 16px;
    font-weight: bold;
    width: 100px;
    height: 28px;
    border-radius: 5px;
    align-items: center;
    letter-spacing: 1.6px;
    box-shadow: var(--shadow);
}

<div class="my_dataviz" id="my_dataviz">

</div>
<div class="modal-footer">
  <input class="modal-btn" type="button" value="Select it" />
</div>