Use variables to set in style with javaScript

Question

function Scale(){
    X = innerWidth / 1024;
    Y = innerHeight / 768;

    Z = document.getElementById("IFM");
    Z.style.transform = "scale(X, Y)";
}

I have a problem with this code. I couldn't use variables in scale!
What can I do with this problem?

Answer 1

JavaScript has no inline string variables. All you can do is concatenate strings:

Z.style.transform = "scale("+X+", "+Y+")";

The numbers will be implicitly converted to strings.

You might as well use some custom sprintf-like format- or replace-methods, but usually concatenation with + is simpler.

Answer 2

You either build the string with concats / plus or use String.prototype.replace.

Z.style.transform = "scale(" + X + "," + Y + ")";

or with a helper like

String.prototype.sFormat = function _simpleFormat( map ) {
    var myString    = this.toString(),
        args        = map instanceof Array ? map : Array.prototype.slice.call( arguments );

    while( ~myString.indexOf( '%r' ) ) {
        myString = myString.replace( '%r', args.shift() );
    }

    return myString;
};

.. and then go like

Z.style.transform = "scale(%r, %r)".sFormat(X,Y);

Answer 3

Change that line to:

Z.style.transform = "scale(" + X +", "+ Y + ")";

Answer 4

try this way "scale(" +X+ "," +Y+ ")";