How to move this div left based on updated x position value?

Question

http://codepen.io/leongaban/pen/WvOmwL

This should be pretty simple, trying the answer found here to no avail.

d.style.left = x_pos+'px';

I have a div #carousel-list I want to move left and right based on the < > nav buttons.

Current javascript:

document.getElementById('move-right').addEventListener("click", moveRight, false);

var carousel = document.getElementById("carousel-list");

function getPosX(el) {
  // yay readability
  for (var lx=0;
       el != null;
       lx += el.offsetLeft, el = el.offsetParent);
  return {x: lx};
}

function moveRight() {
  var currentX = getPosX(carousel);
  console.log(currentX.x); // returns 0
  console.log(currentX - 20); // returns NaN for some reason
  carousel.style.left = (currentX - 20)+'px';
  console.log(currentX.x); // still returns 0 so div does not move
}

Thoughts on my I can't move the carousel div? Or why (currentX - 20) returns NaN when currentX is the number 0?

Answer 1

Oops, change:

carousel.style.left = (currentX - 20)+'px';

to:

carousel.style.left = (currentX.x - 20)+'px';