TranslateX value is not updated

Question

I am trying to create a photo slider. At the moment, I do not mind if I do it not so well. I am interested to know why, after changing the value TranslateXthrough jQuery, and then printing it in the console, it does not print the changed value?

var translateX;

function transX_func() {
    var matrix = $('#img1, #img2, #img3, #img4, #img5').css('transform').split(/[()]/);
    var newArray = new Array();
    newArray = matrix[1].split(',');

    for (a in newArray) {
        newArray[a] = parseInt(newArray[a], 10); 
    }

    var transX = newArray[4];
    translateX = transX;
}

$('#next').click(function(event){       
    event.preventDefault();
    transX_func();
    if (translateX == 0) {
        $('#img1, #img2, #img3, #img4, #img5').css({
            'transform': 'translateX(-100%)'
        });
        transX_func();
        console.log(translateX);
    }   
    else {}
}); 

EDIT: because of your comments, I added all the code here: http://codepen.io/SaharShukrun/pen/pyzeRB

this is not the code from which I originally had the problem, but it is very similar, fixed problems make the same problem.

I solved this problem, realizing what causes the var value not to be updated, and I posted the answer below.

Answer 1

, (css transform = > , / ...), , transform: translateX(0); , matrix = ["none"]...

, , .

, ,

css transform -100%, ( : img 800px, -800).

, . , , ( ) .

, , , ...

Answer 2

, .

, MCVE, , , . , :).

MCVE, .

, , , . infact, . 2 , " 2s". , , , .

": 2s", . , . , .

. ( , )

var translateX = 0;

var firstVal = 0;

function transX_func(){

    var matrix = $('#img1,#img2,#img3,#img4,#img5').css('transform').split(/[()]/);
    console.log("matrix = ", matrix);
    var newArray = new Array();         
    newArray = matrix[1].split(',');

    for (a in newArray ) {
        newArray[a] = parseInt(newArray[a], 10); 
    }
    var transX = newArray[4];
    translateX = transX;
    console.log("translateX inner = ",translateX);
}


$('#next').click(function(event){       
    event.preventDefault();
    if(translateX == 0){
        $('#img1,#img2,#img3,#img4,#img5').css({'transform':'translateX(-100%)'});      
        transX_func();
        firstVal = translateX;
    }
    else{
        var newVal = firstVal + translateX;
        $('#img1,#img2,#img3,#img4,#img5').css({'transform':'translateX(' + newVal + 'px)'});       
        transX_func();
    }


}); 

$('#prev').click(function(){

});