使用javascript将CSS属性值添加到现有值

Question

I'm trying to change ul translate with JS

<ul id="navigation" style="-webkit-transform: translateX(0px);"></ul>

by clicking on button

<input type="button" value=">" onclick="pomakDesno()" class="button"/>  

But when I change it using onclick I would like with every click to increase it, in otherwords, add some value to already existing value. I have this code. What am I doing wrong?

    <script>
        function pomakDesno(){
        var mvalue=document.getElementById('navigation').style.WebkitTransform;
        var tvalue=111;
        var zvalue= mvalue+tvalue;
        document.getElementById('navigation').style.WebkitTransform='translateX(' + zvalue + 'px)';}

    </script>

Answer 1

You need to extract the number from inside translateX(...) in the original style.

function pomakDesno(){
    var mvalue=parseInt(document.getElementById('navigation').style.WebkitTransform;
    var translateX = parseInt(mvalue.match(/translateX\((\d?)px\)/)[1], 10);
    var tvalue=111;
    var zvalue= mvalue+tvalue;
    document.getElementById('navigation').style.WebkitTransform='translateX(' + zvalue + 'px)';
}