title: undefined javascript value after echoing a function's parameters in html onload tag php
body: <p>I've got a php function which echos out a skill-bar object's tags to render it to the screen and I'm trying to pass in a function to define it's individual percentage that it should be when it loads, but for some reason the value that defines the percentage is undefined when I debug it in the console even though it called the function perfectly fine:</p>
  
  <pre><code>rotating circle undefined% 
  </code></pre>
  
  <p>Here's where I'm declaring the function to set the percentage in a functions.php file (simplified to show exactly where the problem is, data-progress is it's starting value, it needs to be changed cause it's not very readable):</p>
  
  <pre><code>function echo_skillbar($data_progress, $function){
      echo " &lt;div class='radial-progress' data-progress='$data_progress' onLoad = '$function'&gt; " 
  }
  </code></pre>
  
  <p>I call it in the main page like this:</p>
  
  <pre><code>&lt;div class = "col-xs-3"&gt;
      &lt;?php echo_skillbar(0, 'rotate_circle(80)') ?&gt;
      &lt;br&gt;&lt;div class = ""&gt;&lt;b&gt;&lt;p&gt;HTML&lt;/p&gt;&lt;/b&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the javascript function, so I change the data-progress attribute from it's starting point (0) to 80(%), but that value is coming up as undefined even though I passed it in and the function loads fine, makes no sense:</p>
  
  <pre><code>function rotate_circle(value){
  
      console.log("rotating circle " + value + "%");
  
      $('head style[type="text/css"]').attr('type', 'text/less');
      less.refreshStyles();
  
      window.animate = function () {
          $('.radial-progress').attr('data-progress', value);
      }
  
      setTimeout(window.animate, 2000);
      $('.radial-progress').click(window.animate);
  }
  </code></pre>
  
  <p>Looking forward to any answers cause I am stumped as a tree right now </p>