code not executing after for loop -- javascript

Question

I'm writing a function that is supposed to loop through all my checkboxes and load the "value" of the checkboxes that are checked into an array, however nothing is executing beyond the first for loop. I'm completely stumped here, what am I missing?

function saveSettings(){
    var count = 1; //count for db
    var checked=[]; //array of checked values
    var inc = 0; //only incremented when checkbox is checked
    var dataString = "x";

    for(var i=0; i<=2; i++) { //loads checked array with checked values
        if(document.getElementById("check"+i).checked == true){
            checked[inc] = document.getElementById("check"+i).value;
            alert(checked[inc]) // <------ executing as expected
            inc++;
        }
    }

    alert("made it") // <------ not executing
    if(checked.length>0){ // loads checked values into dataString
        for(var i=0; i == checked.length; i++){
            if(i == 0){
                dataString = "co_" + count +"="+checked[i]
            }
            else {
                dataString = dataString +"&co_" + count +"="+checked[i]
            }
            count++;
        }
    }

    alert(dataString)

Answer 1

in this line

if(document.getElementById("check"+i).checked == true){ //...

the getElementById will return an undefined value, and undefined does not have the .checked property.

how many checkboxes do you have in the document?

Answer 2

Try below working solution. Second for loop condition in your code (i == checked.length) is wrong. It should be i < checked.length)

function saveSettings() {

        var count = 1; //count for db
        var checked = []; //array of checked values
        var inc = 0; //only incremented when checkbox is checked
        var dataString = "x";

        for (var i = 0; i <= 2; i++) { //loads checked array with checked values
            if (document.getElementById("check" + i).checked == true) {
                checked[inc] = document.getElementById("check" + i).value;
                inc++;
            }
        }
        if (checked.length > 0) { // loads checked values into dataString
            for (var i = 0; i < checked.length; i++) {
                if (i == 0) {
                    dataString = "co_" + count + "=" + checked[i]
                }
                else {
                    dataString = dataString + "&co_" + count + "=" + checked[i]
                }
                count++;
            }
        }
        alert(dataString)
    }

Answer 3

your second for loop had a mistake

function saveSettings(){
    var count = 1; //count for db
    var checked=[]; //array of checked values
    var inc = 0; //only incremented when checkbox is checked
    var dataString = "x";

    for(var i=0; i<=2; i++) { //loads checked array with checked values
        if(document.getElementById("check"+i).checked == true){
            checked[inc] = document.getElementById("check"+i).value;
            alert(checked[inc]) // <------ executing as expected
            inc++;
        }
    }

    alert("made it") // <------ not executing
    if(checked.length>0){ // loads checked values into dataString
        for(var i=0; i < checked.length; i++){
            if(i === 0){
                dataString = "co_" + count +"="+checked[i]
            }
            else {
                dataString = dataString +"&co_" + count +"="+checked[i]
            }
            count++;
        }
    }

    alert(dataString)
    }

<input type="checkbox" id="check0"/>
<input type="checkbox" id="check1"/>
<input type="checkbox" id="check2"/>
<button onclick="saveSettings()">Run</button>

Answer 4

From your description of the problem, I think the problem is the number of checkboxes, if you have only 2 checkboxes then the condition i<=2 will cause problem because docuement.getElementById('check2') will be undefined causing an error like Uncaught TypeError: Cannot read property 'checked' of null in your console.

Since you are trying to deal with dynamic number of elements try to use a class to select the checkboxs of interest like

function saveSettings() {

  var checked = [];
  var dataString = "x";

  var checks = document.getElementsByClassName('check');
  //if you can't add a class then fetch all the checkboxes in the page
  //var checks = document.querySelectorAll('input[type="checkbox"]');

  for (var i = 0; i < checks.length; i++) {
    if (checks[i].checked == true) {
      checked.push(checks[i].value);
    }
  }
  console.log("made it: ", checked)

  if (checked.length > 0) {
    dataString = '';
    for (var i = 0; i < checked.length; i++) {
      dataString += (i == 0 ? '' : '&') + "co_" + i + "=" + checked[i]
    }
  }
  alert(dataString)
}

<input type="checkbox" class="check" id="check0" value="1" />
<input type="checkbox" class="check" id="check1" value="2" />
<input type="checkbox" class="check" id="check2" value="3" />
<br />
<button onclick="saveSettings()">Test</button>