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

Question

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

"It doesn't work" doesn't help people who are trying to answer your question much. Instead describe what is currently happening and what you expect to happen so we can understand what you are trying to accomplish and what might be going wrong. Reading How to Ask will help you get more/better quality answers in the future. — Useless Code
– Useless Code, Commented Apr 2, 2017 at 12:19

Anonymous · Accepted Answer · 2017-04-02 12:37:27Z

5

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.

edited Apr 2, 2017 at 12:37

answered Apr 2, 2017 at 10:44

Anonymous

1,9882 gold badges19 silver badges28 bronze badges

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

1 Comment

user1106925 Over a year ago

This isn't a 'must' anymore with template literals. .webkitTransform = `rotate(${x}deg)`;

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related