Change css value by arraylist in javascript

Question

I want to change my css style by JavaScript like i change transform: rotateZ(120deg);

<script>
    var Rotate = ['90deg','120deg','150deg','180deg','210deg','240deg','90deg','120deg','150deg','180deg','210deg','240deg'];
     function Time() {
         var marg, d, hour; 
         marg = document.getElementById("hand");  
         d = new Date(); 
         hour = d.getHours();
         for(i = 0; i < 12; i++) {
             if(hour == i) { 
                 var x=Rotate[i]; 
                 alert(x); 
                 marg.style.transform= "rotateZ(x)";
             }
         }
    }
</script>

alert(x) is working but transform is not working. Is there any way to use array list to change transform value?

"rotateZ(x)" is just a string -- you were not actually using the x variable at all! — Tom Lord
– Tom Lord, Commented Jun 29, 2016 at 11:55

Gaurav Aggarwal · Accepted Answer · 2016-06-29 11:50:05Z

1

You are using "rotateZ(x)". Here x is not a variable for this script because you are writing it like string. Variables must be written outside ".

Use it like this

var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg'];

function Time() {
    var marg, d, hour;
    marg = document.getElementById("hand");
    d = new Date();
    hour = d.getHours();
    for (i = 0; i < 12; i++) {
      if (hour == i) {
        var x = Rotate[i];
        alert(x);
        marg.style.transform = "rotateZ("+x+")";
      }
    }

answered Jun 29, 2016 at 11:50

Gaurav Aggarwal

10.2k8 gold badges42 silver badges76 bronze badges

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

Comments

Mohammad Usman · Accepted Answer · 2016-06-29 12:02:31Z

1

"rotateZ(x)" in your code is a complete string. You need to change it to "rotateZ(" + x + ")" to make your code work.

You can use Array#forEach to simplify your task.

var Rotate = ['90deg', '120deg', '150deg', '180deg', '210deg', '240deg', '90deg', '120deg', '150deg', '180deg', '210deg', '240deg'];

function Time() {
    var marg, d, hour;

    marg = document.getElementById("hand");
    d = new Date();
    hour = d.getHours();

    Rotate.forEach(function(v, i) {
        if (hour == i) {
            alert(v);
            marg.style.transform = "rotateZ("+ v + ")";
        }
    });
}

answered Jun 29, 2016 at 12:02

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

Comments

Carlo · Accepted Answer · 2016-06-29 12:10:36Z

0

I know that is beyond your question, but I think the best possible solution to solve the problem is using different css classes and only change the class name in js.

Fiddling with css properties in js seems really unneccessary to me :(

answered Jun 29, 2016 at 12:10

Carlo

2,11221 silver badges30 bronze badges

1 Comment

Tuhin Over a year ago

can you more describe ? or give me an example plz

Collectives™ on Stack Overflow

Change css value by arraylist in javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related