CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alfjlsjfowrejow
alfjlsjfowrejow

Reputation: 1

How do I insert variable values into DOM style value in JavaScript

I have the following code: When the slide value changes the transform property for the element should take the slide value which by default are 0deg, i want it to change gradually for the slide value, but i don't know why but it's not working as it should.

<pre>
<body>
<div id="trsScript">
</div>
<input type="range" min="0" max="360" id="mxConcept" oninput="shthis()"             
onchange="shthis()"></BR>
<p id="callme"></p>
<style>
#trsScript{
    width: 200px;
    height: 100px;
    background-color: greenyellow;
    transform: rotate(0deg);
}

</style>

<script>
function shthis(){
    var x = document.getElementById('mxConcept').value;
        document.getElementById('callme').innerHTML=x;
        document.getElementById("trsScript").style.webkitTransform =         
"rotate(100deg)";
}


</script>
</body>
</pre>

Codepen

Upvotes: 0

Views: 1607

Answers (1)

Anonymous
Anonymous

Reputation: 1990

You must apply the value x to the transform property like this:

 function shthis(){
        var x = document.getElementById('mxConcept').value;
            document.getElementById('callme').innerHTML=x;
            document.getElementById("trsScript").style.webkitTransform = "rotate("+x+"deg)";
    }

update:

document.getElementById("trsScript").style.webkitTransform = `rotate(${x}deg)`

also works using template literals.

Upvotes: 5

Related Questions