can't access JavaScript array values by index

Question

I have some code that should selected data from an HTML table into a JavaScript array. The code appears to work fine, yet I can not then access the array values by index. The alerts in this jsfiddle show that the contents and length of the array appear as expected. Have I got some kind of Typing error?

https://jsfiddle.net/nicktry/bwdsh5uv/39/

$(function () {

var selectedJobs = [];

//remove job from list
function removeJob(arr, jobValue) {
    var p = arr.indexOf("'"+jobValue+"'");
    if (p != -1) {
        arr.splice(p, 1);
    }

}

//add job to list
function addJob(arr, jobValue) {
       arr.push("'"+jobValue+"'"); //append
       arr = arr.sort(); //sort list 
}

$('table tbody tr').click(function (event) {
    if (event.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');
    }

});

$("input[type='checkbox']").change(function (e) {

if ($(this).is(":checked")) {
    $(this).closest('tr').addClass("selected_row");
    addJob(selectedJobs, $(this).parent().next().text());
    alert(selectedJobs);
    alert(selectedJobs.length);        
} else {
    $(this).closest('tr').removeClass("selected_row");
    removeJob(selectedJobs, $(this).parent().next().text());
    alert(selectedJobs);
    alert(selectedJobs.length);
}
});


var cluster1Job1 = selectedJobs[0];
var cluster1Job2 = selectedJobs[1];
var cluster1Job3 = selectedJobs[2];

document.getElementById('c1J1').innerHTML = cluster1Job1;
document.getElementById('c1J2').innerHTML = cluster1Job2;    
document.getElementById('c1J3').innerHTML = cluster1Job3;    
});

Thanks

Answer 1

You're not updating the divs at the bottom after the jobs change.

https://jsfiddle.net/bwdsh5uv/41/

I put the div stuff at the bottom in a function

function checkJobs() {

  var cluster1Job1 = selectedJobs[0];
  var cluster1Job2 = selectedJobs[1];
  var cluster1Job3 = selectedJobs[2];

  document.getElementById('c1J1').innerHTML = cluster1Job1;
  document.getElementById('c1J2').innerHTML = cluster1Job2;    
  document.getElementById('c1J3').innerHTML = cluster1Job3;   
}

then after the jobs change I call that function

$("input[type='checkbox']").change(function (e) {
  if ($(this).is(":checked")) {
      $(this).closest('tr').addClass("selected_row");
      addJob(selectedJobs, $(this).parent().next().text());
      alert(selectedJobs);
      alert(selectedJobs.length);        
  } else {
      $(this).closest('tr').removeClass("selected_row");
      removeJob(selectedJobs, $(this).parent().next().text());
      alert(selectedJobs);
      alert(selectedJobs.length);
  }
  checkJobs();
});

Answer 2

I'm not sure I understand the question correctly, but if I understand correctly you want the elements c1J1, c1J2 and c1J3 to update when the checkbox is checked.

You currently don't have this behavior, because the inner text is only updated once, as it does not respond to any event handler. In order for this to work you can add the change code to event handler, for example to change:

$("input[type='checkbox']").change(function (e) {

    if ($(this).is(":checked")) {
        $(this).closest('tr').addClass("selected_row");
        addJob(selectedJobs, $(this).parent().next().text());
        alert(selectedJobs);
        alert(selectedJobs.length);        
    } else {
        $(this).closest('tr').removeClass("selected_row");
        removeJob(selectedJobs, $(this).parent().next().text());
        alert(selectedJobs);
        alert(selectedJobs.length);
    }

    var cluster1Job1 = selectedJobs[0];
    var cluster1Job2 = selectedJobs[1];
    var cluster1Job3 = selectedJobs[2];

    document.getElementById('c1J1').innerHTML = cluster1Job1;
    document.getElementById('c1J2').innerHTML = cluster1Job2;    
    document.getElementById('c1J3').innerHTML = cluster1Job3;    

});