How do we update CSS Transform() on rotation?

JavaScript
1

I have JS code that grabs the magnetic direction and outputs in text the number in degrees. That works fine. But I want to make it visual, a pointer that rotates according to that number.

I have a div containing an SVG graphic (N with a vertical arrow). I use this code to rotate it:

    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading; // this shows an integer; updates every 3 seconds

        var north = document.getElementById("heading2");
        north.style = "-webkit-transform:rotate(" + magneticHeading + ")"; // this remains stationary instead of rotating
    }

How do I get the div or graphic in it to rotate? How do I get it to continue rotating on update?

2

Here is the SVG section if you need it:

<!-- SVG image BEGIN -->
<div id="heading2">
<svg version="1.1" id="heading3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<ellipse fill="#FFF01F" cx="100.442" cy="100" rx="99.558" ry="100"/>
<polygon fill="#009ADF" points="127.8,58 162,58 100.8,4 37.8,58 73.8,58 73.8,192.61 127.8,192.61 "/>
<g>
	<path d="M36.949,167.744V66.442h23.64l52.942,51.251c12.066,11.874,21.916,22.545,29.55,32.917l0.739-0.15
		c-1.971-13.528-2.463-25.852-2.463-41.634V66.442h20.192v101.302h-21.67l-52.696-51.402C75.61,105.069,64.529,93.497,56.402,82.524
		l-0.738,0.15c1.231,12.776,1.477,24.95,1.477,41.784v43.286H36.949z"/>
	<path fill="#FF1F88" d="M163.05,169.244h-23.78l-0.438-0.426l-52.696-51.402c-12.615-12.287-21.813-22.229-28.63-30.963
		c0.939,11.501,1.135,22.917,1.135,38.005v44.786H35.449V64.942h25.747l53.378,51.673c11.709,11.522,20.447,21.082,27.179,29.754
		c-1.556-12.467-1.896-24.164-1.896-37.543V64.942h23.192V169.244L163.05,169.244z M140.49,166.244h19.56V67.942h-17.192v40.884
		c0,14.776,0.416,27.475,2.447,41.418l0.204,1.403l-3.067,0.624l-0.568-0.772c-6.941-9.431-16.281-19.833-29.394-32.736
		l-52.498-50.82H38.449v98.302h17.192v-41.786c0-16.708-0.241-28.878-1.47-41.64l-0.129-1.345l2.998-0.609l0.568,0.768
		c6.91,9.329,16.64,20.018,30.622,33.636L140.49,166.244L140.49,166.244z"/>
</g>
</svg>
</div>
<!-- SVG image END -->
3

This doesn’t work either:

    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
        if (heading.magneticHeading > 0) {
        	var north = document.getElementById("heading3");
    		north.style = "-webkit-transform:rotate(" + heading.magneticHeading + "deg)";
        }
    }

As a test, adding the CSS directly to the element does indeed rotate it:

<svg version="1.1" id="heading3" x="0px" y="0px" style="-webkit-transform:rotate(90deg)" ....

It just won’t rotate when the innerHTML of id “heading” changes (which changes when the mobile device is rotated).

4

My apologies. I think this belongs in the JavaScript forum.

5

This doesn’t work:

   function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
        // key, value pair into localStorage to access it in next function
    	localStorage.setItem('direction', heading.magneticHeading); 
    	active();
    }
    
    function active() {
     var direction = localStorage.getItem('direction'); // get data from localStorage
    	var north = document.getElementById("heading3");
    	north.style = "-webkit-transform:rotate(" + direction + "deg)";
    }
6

Are my posts too complicated? Is more information needed?