Using a JavaScript variable in a CSS transform

Question

Just starting out with JS so this is likely a newbie question. I am trying to figure out how to use a JS variable when using this line of code in my JS:

But3.style.webkitTransform = "translateX(JSVARIABLE)";

In my JS file I am running a function when a button is hovered over:

HTML

<html>
<div id= "But3" class="Button3"> </div>
</html>

When this button is hovered over (mouseover), the function is run in my JS code here:

JS

But3.onmouseover = function(){

  var h = document.getElementById("But3").clientHeight;
  var w = document.getElementById("But3").clientWidth;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

   /* This may be completely wrong*/
  var x = String(nh);
  var y = String (nw)

  /* This may also be completely wrong*/
  var nhf = x + "px";
  var nwf = y + "px";

  /* This works but I need it to work with nhf */
  But3.style.webkitTransform = "translateX(10px)";

}

How can I make it so that I can use my value nhf and nwf as the values for my translateX transform?

Note that I may be incorrectly formatting the values since I convert them to a string in order to include "px".

Here is my CSS if this is needed:

.Button3{
height: 20%;
  width: 17%;
  left: 30%;
  top: 20%;
  border-radius: 20%;
  background: #8585ad;
  margin: auto;
  position: relative;
  cursor: pointer;
  transition: 2s;
}

Possible duplicate stackoverflow.com/questions/4234533/… / stackoverflow.com/questions/1408289/… — TheWandererLee
– TheWandererLee, Commented Mar 29, 2019 at 18:49

jerrylow · Accepted Answer · 2019-03-29 17:54:07Z

3

You can concat the variable in your value:

 But3.style.webkitTransform = "translateX(" + nhf + ")";

answered Mar 29, 2019 at 17:54

jerrylow

2,6391 gold badge17 silver badges26 bronze badges

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

Comments

TheWandererLee · Accepted Answer · 2019-03-29 18:41:24Z

2

As jerrylow said, concatenate the variable into the string. This makes some of your excess code unnecessary

document.getElementById("But3").onmouseover = function(){

  var h = document.getElementById("But3").clientHeight;
  var w = document.getElementById("But3").clientWidth;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  // translateX should probably use nw instead of nh
  But3.style.webkitTransform = "translateX(" + nh + "px)";

}

<input type="button" value="Hover me" id="But3">

answered Mar 29, 2019 at 18:41

TheWandererLee

1,0425 silver badges14 bronze badges

1 Comment

Chabo Over a year ago

Thank you for pointing out that nw should be used w/ translateX

vince · Accepted Answer · 2019-03-29 18:28:49Z

0

You can use string interpolation within a template literal to accomplish this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals.

In your case, that would look like:

But3.style.webkitTransform = `translateX(${nhf})`;

Template literals were introduced in the ES2015 specification and are supported by most major browsers.

answered Mar 29, 2019 at 18:28

vince

8,3463 gold badges39 silver badges45 bronze badges

Collectives™ on Stack Overflow

Using a JavaScript variable in a CSS transform

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related