Here is my code:
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
body {
text-align: center;
width: 100%;}
#container {
transform: rotate(30deg);
transform-origin: bottom center;
-ms-transform: rotate(30deg); /* IE 9 */
-ms-transform-origin: bottom center;
-webkit-transform: rotate 0deg; /* Safari and Chrome */
-webkit-transform-origin:bottom center;
border: 1px solid black;
width: 152px;
margin: 40px auto;
height: 244px;
overflow: visible;
}
</style>
<script>
var meteo = (function () {
var meteo = null;
$.ajax({
'async': false,
'global': false,
'url': "http://api.openweathermap.org/data/2.5/weather?q=Leicester&units=metric",
'dataType': "json",
'success': function (data) {
meteo = data;
}
});
return meteo;
})();
var vento_forza = meteo.wind.speed;
var vento_direzione = meteo.wind.deg+"deg";
</script>
</head>
<body>
<div id="container">
<svg version="1.1" id="indicator" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="152px" height="244px" viewBox="0 0 152 244" enable-background="new 0 0 152 244" xml:space="preserve">
<polygon fill="#84FFFB" points="0,244 76,207 152,244 "/>
<polygon fill="#D6F4FF" points="76,0 76,207 152,244 "/>
<polygon fill="#00A5EC" points="76,0 76,207 0,244 "/>
</svg>
</div>
<script>
function direzione(){
document.getElementById("container").style.webkitTransform = "rotate(vento_direzione)"
}
</script>
<input type="button" onclick="direzione()" value="Change link">
</body>
</html>
Basically I want the rotation of the container div to vary accordingly to the var vento_direzione (which it is a number obtained from the api request to witch I have appended a "deg" string) whenever I click the button; sadly, that doesn't seem to happen. If I just pass a value inside the function instead of the var, everything works fine. What am I doing wrong?
Please help! Cheers!