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

Do you want to access to selectedJobs in "var cluster1Job1 = selectedJobs[0];" before to check any checkbox? — Geo Perez
– Geo Perez, Commented May 4, 2015 at 19:53

Charlie Wynn · Accepted Answer · 2015-05-04 19:55:43Z

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

krivtom · Accepted Answer · 2015-05-04 19:56:23Z

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;    

});

Collectives™ on Stack Overflow

can't access JavaScript array values by index

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related