I am trying to append my selections to an array when I click my submit button. I am assuming I need to be using eventlistener onclick function for this instead.

With my current method it is throwing the following error...

EDITED Cannot read properties of null (reading 'length') at submit_button.onclick

Here is what I have currently, can anyone advise where I am going wrong please...

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.getElementsByClassName('.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)
  }
}

.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  id="my_dataviz">

</div>
<div >
  <input  type="button" value="Select it" />
</div>

CodePudding user response：

It is telling you that submit_button is null. I think you did a mistake here:

let submit_button = document.querySelector('modal-btn')

Maybe you wanted .modal-btn (if it's a class)?

Also, no, you don't need to set it with addEventListener. It can work with onclick too.