onclick事件未拾取要附加的className元素-顯示錯誤

我不確定為什么我的代碼在單擊提交按鈕時沒有選擇我的選擇并將其附加到我的陣列中。我收到以下錯誤...

“modals.js:103 Uncaught TypeError：無法在 submit_button.onclick 讀取 null 屬性（讀取“長度”）

我的代碼在選擇時將“按鈕焦點”添加到 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>

uj5u.com熱心網友回復：

當用戶按下提交按鈕時，它應該運行 querySelector。

const dataResults = []

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

submit_button.onclick = function() {
    dataResults = document.querySelectorAll('.btn.button-focus') // Edit
    console.log(dataResults)
  }
}

uj5u.com熱心網友回復：

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

如果沒有找到想要的元素，querySelector 回傳 null。

但無論如何你想要的是將 querySelector 更改為 querySelectorAll 并使用以下代碼：

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

（我對您的代碼進行了多項更改，根據我認為您想要做的更改了功能（我沒有閱讀您在代碼中的目的是什么））

標籤：javascript html css

上一篇：ReactJSlocalstorage.getItem不作業

下一篇：洗掉GoogleAppScriptFAST中的特定列