CODEWITHSUNDEEP
javascriptcss
user3303784
user3303784

Reputation: 13

Adding css property value to existing value with javascript

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>

Upvotes: 1

Views: 419

Answers (1)

Barmar
Barmar

Reputation: 780698

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

Upvotes: 1

Related Questions