I am not sure why my code is not picking up my selections and appending then to my array when the submit button is clicked. I am getting the following error...

"modals.js:103 Uncaught TypeError: Cannot read properties of null (reading 'length') at submit_button.onclick"

My code adds 'button focus' to the className when selected.

I want to take those selections and append them to my an array.

For some reason it does not detect any elements with the className of '.btn.button-focus'.

Any ideas?

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

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

CodePudding user response：

It should run querySelector when the user presses the submit button.

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)
  }
}

CodePudding user response：

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

querySelector returns null if it didn't find wanted elements.

But what you want anyways is change querySelector to querySelectorAll and use this code then:

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])
  }
}

(I made multiple changes to your code which changed the functionality according to what I think you wanted to do (I didn't read what is your purpose in the code))