JavaScript NaN issue on click

Question

I have the following script at:

function rotateFoo(current) {
  var angle = (current.data('angle') + 90);
  current.data('angle', angle);
  console.log('angle: ', angle);
  current.css({
    'transform': 'rotate(' + angle + 'deg)'
  });

  current.data('angle1', angle);
}

$(document).ready(function() {
  function generateNumb() {
    var start = [0, 90, 180, 270];
    var start = start[Math.floor(Math.random() * 4)];
    return start;
  }

  $('.foo').each(function() {
    $(this).css({
      'transform': 'rotate(' + generateNumb() + 'deg)'
    });
  });

  $('.foo').on('click', function() {
    rotateFoo($(this));
  });
});

.wrapper {
  width: 306px;
  border: 3px solid black;
  margin: 50px auto 0;
  overflow: hidden;
}
.foo {
  width: 100px;
  height: 70px;
  background-color: #faa;
  transition: all .5s ease;
  float: left;
  cursor: pointer;
  text-align: center;
  padding-top: 30px;
  border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="wrapper">
  <div class="foo">1</div>
  <div class="foo">2</div>
  <div class="foo">3</div>

  <div class="foo">4</div>
  <div class="foo">5</div>
  <div class="foo">6</div>

  <div class="foo">7</div>
  <div class="foo">8</div>
  <div class="foo">9</div>
</section>

<p>
</p>

it's a very simple puzzle game prototype. https://jsfiddle.net/dg0ugws1/70/

It starts with a random angle for each tile. However when I click on it I would like to rotate it by 90 degrees clockwise.

However my console.log is throwing this error:

angle:  NaN

@Liam Creating the snippet with all of the CSS added a bunch of irrelevant code to the question. Having the fiddle was fine since the JavaScript is where the problem lies. — krillgar, Dec 09 '16 at 13:37
@Liam The CSS is irrelevant. As are all the `.foo`s, you only need two at the most. — Dave Newton, Dec 09 '16 at 13:39
Possible duplicate of [How to retrieve the angle in css3 rotate?](http://stackoverflow.com/questions/13592384/how-to-retrieve-the-angle-in-css3-rotate) — thekodester, Dec 09 '16 at 13:39
The CSS is clutter. The problem lies in the JavaScript as pointed out by @DaveNewton and pwolaq. If you wanted to execute the code and watch them spin, check the fiddle. If there was a way to hide the CSS, etc, then that'd be fine. — krillgar, Dec 09 '16 at 13:39
`var angle = current.data('angle') ? current.data('angle') + 90 : 90;` — CBroe, Dec 09 '16 at 13:40

score 5 · Accepted Answer · answered Dec 09 '16 at 13:39

It's because on initial rotation you do not set any data('agle') to element and when clicking you get undefined + 90

function rotateFoo(current){
  
    var angle = (current.data('angle') + 90);
    current.data('angle', angle);
    console.log('angle: ', current.data('angle'));
    current.css({'transform': 'rotate(' + angle + 'deg)'});
    
    current.data('angle1', angle);
}

$(document).ready(function(){
   
    function generateNumb() {
    var start = [0, 90, 180, 270];
     var start = start[Math.floor(Math.random() * 4)];
      
      return start;
    }
   
  $('.foo').each(function(){
        var angle = generateNumb();
  $(this).css({'transform': 'rotate(' + angle + 'deg)'}).data('angle', angle);
  });
  
  $('.foo').on('click', function(){
    rotateFoo($(this));
  });
  
});

body {
    font-family: sans-serif;
}

button {
  width: 180px;
  height: 80px;
  padding: 10px;
  cursor: pointer;
  font-size: 20px;
}

.wrapper {
  width: 306px;
  border: 3px solid black;
  margin: 50px auto 0;
  overflow: hidden;
}

.foo {
    width:100px;
    height:70px;
    background-color:#faa;
    transition: all .5s ease;
    float: left;
    cursor: pointer;
    text-align: center;
    padding-top: 30px;
    border: 1px solid #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="wrapper">
<div class="foo">1</div>
<div class="foo">2</div>
<div class="foo">3</div>

<div class="foo">4</div>
<div class="foo">5</div>
<div class="foo">6</div>

<div class="foo">7</div>
<div class="foo">8</div>
<div class="foo">9</div>
</section>

<p>
</p>

score 0 · Answer 2 · edited Dec 10 '16 at 12:33

0

you just need to change this

    $('.foo').each(function(){
      $(this).css({'transform': 'rotate(' + generateNumb() + 'deg)'});
    });

with

   $('.foo').each(function(){
      var ang =  generateNumb();
      $(this).css({'transform': 'rotate(' + ang + 'deg)'});
      $(this).data('angle', ang);
   });

This way the angle value is set.

edited Dec 10 '16 at 12:33

Dave Newton

158,873
26
254
302

answered Dec 09 '16 at 13:45

Manoj Lodhi

978
4
10

This is what CSS transforms look like. This is doing nothing more than string concatenation. Moving the result of a function into a variable doesn't change the operation in the slightest. – Dave Newton Dec 09 '16 at 14:47
@Dave Newton, You are getting it wrong, I used variable so that we can use same random value to css and data property as well. The main thing missing here was not to set angle property in data first time. – Manoj Lodhi Dec 09 '16 at 15:29
Ah, I see. Understood. – Dave Newton Dec 10 '16 at 12:32

JavaScript NaN issue on click

2 Answers2