"transform: rotate(' ')" Not working. Javascript

Question

I am trying to make what it seemed originally as a simple exercise, a spin wheel. But it turned out far more frustrating than what I was expecting. So i googled how to make one and my code was pretty similar to what I found, yet mine didn't work and the JSFiddle Example seemed to work.

So next thing I did is delete everything I had and copy and paste the JSFiddle. But guess what? It didn't work. Here it is the JSFiddle http://jsfiddle.net/YNBxz/2/

I added an alert to see if it would even enter the function, and it didn't even enter the function. The code seems alright and in JSFiddle it also works.

 var img = document.querySelector('img');
 img.addEventListener('click', onClick, false);

 function onClick() {
     alert('ALERT ME');
     this.removeAttribute('style');
     var deg = 500 + Math.round(Math.random() * 500);
     var css = 'transform: rotate(' + deg + 'deg);';
     this.setAttribute('style', css);
 }

Sorry if in some parts where unclear, I tend to over complicate stuff from time to time.

I don't get it, so does your posted fiddle work or no? Because it works for me, only had to change the prefixes — 19greg96
– 19greg96, Commented Aug 25, 2014 at 22:21
Sure it vvorks but, but the moment I put ut on my code it stops vvorking. It doesn't matter if I add prefixes or not. Plus all major brovvser support (except for safari) vvithout prefixes. It makes no sense to me vvhy is not vvorking that is the reason vvhy I'm asking. — fabrv
– fabrv, Commented Aug 26, 2014 at 23:39
I suppose you have more than one <img>'s on your page? If so, that could be messing your code up — 19greg96
– 19greg96, Commented Aug 26, 2014 at 23:56

Pointy · Accepted Answer · 2014-08-25 22:23:34Z

2

Here's a fixed fiddle. You ~~can't~~ shouldn't remove the "style" element from a DOM node. You can however add properties to it:

this.style.webkitTransform = "rotate(" + deg + "deg)";
this.style.mozTransform = "rotate(" + deg + "deg)";
this.style.transform = "rotate(" + deg + "deg)";

answered Aug 25, 2014 at 22:23

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

3 Comments

poke Over a year ago

“You can't remove the "style" element from a DOM node.” – citation needed? Why shouldn’t that be possible? removeAttribute is a DOM method, and the element is a DOM element. Surely, you can remove whatever attribute you want from a node.

Pointy Over a year ago

@poke yes that's true (and answer has been edited) - I stand by my feeling that it's a terrible coding practice to remove it however, because that'll undo all styles on the element. There are probably cases where you'd know that's OK, but it's a bad code smell in my opinion, especially since (for this purpose at least) it's totally unnecessary.

Pointy Over a year ago

@poke also I'm not sure I would bet on it working in pre-IE8 (which may be an irrelevance here in 2014)

poke · Accepted Answer · 2014-08-25 22:27:51Z

1

Your fiddle works fine for me… in a webkit browser. You are using WebKit prefixes, so you need to test it with a browser that interprets those WebKit properties correctly. Using Chrome, it worked fine for me without changing anything. When removing the prefixes, it also works in e.g. Firefox.

And removing prefixes would definitely be the right step here. CSS transforms have been supported by all major browsers for a while now. By using prefixed names, you are just locking out others. So just get rid of the prefixes.

In your code, note that you don’t need the this.removeAttribute('style'); line, as it does effectively nothing. When you want to replace styles, it’s enough to simply replace it. Changes to the DOM, as in changing an element’s attribute value, are collected before they are committed, so removing the attribute first, and then setting it again will be bundled in just changing it in a single operation (there is no pause in between). So you can just as well leave the removeAttribute line out.

answered Aug 25, 2014 at 22:27

poke

392k80 gold badges596 silver badges632 bronze badges

2 Comments

fabrv Over a year ago

You can clearly see I removed the prefixes. By the ansvver you are giving it seems that the code is just fine, must me something vvith vvebMatrix. Sorry for the letter doble-v my parrot destroyed the key.

fabrv Over a year ago

the "VV" Key, I forgot to clarify.

Collectives™ on Stack Overflow

"transform: rotate(' ')" Not working. Javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related