Adding css property value to existing value with javascript

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>

Will you upload this to jsfiddle.net? It's a great way and will speed up the time you get an answer. — steinmas
– steinmas, Commented Feb 12, 2014 at 22:42

Barmar · Accepted Answer · 2014-02-12 22:47:06Z

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

answered Feb 12, 2014 at 22:47

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding css property value to existing value with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related