1

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!

4
  • Jolly good! Now it's working, thenk you! Can you please explain what are those + + for? Why is it not correct to pass the string stored in the var?
    – Neurone00
    Feb 11, 2014 at 15:57
  • @AndreaLigios, he was thanking me but i removed my comment and put it as an answer to explain the string concatenation that he needed. Feb 11, 2014 at 16:11
  • Mistery solved :D @Neurone ora dovresti accettare la risposta cliccando sulla V bianca nell'angolo in alto a sinistra della stessa... Feb 11, 2014 at 16:14
  • Ahaha I'm not crazy and sorry for the typo. Thank you all.
    – Neurone00
    Feb 12, 2014 at 17:18

1 Answer 1

0

you want

document.getElementById("container").style.webkitTransform = "rotate("+vento_direzione+")";

As it is you are just trying to pass it the literal string "rotate(vento_direzione)", variables do not get replaced with their values when they are in strings like that.

So what you need to do is concatenate the actual string parts "rotate(" and ")" with the vento_direzione variable: "rotate("+vento_direzione+")" is string concatenation

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.