title: HTML JavaScript variable data-percent attribute
body: <p>I'm using the data-percent attribute but I need it to be variable. I'm using JavaScript to get data from a text file and need to insert that into the data-percent value</p>
  
  <p>it would be nice to do this</p>
  
  <pre><code> data-percent=".change"
  </code></pre>
  
  <p>or</p>
  
  <pre><code> $('#test').attr('data-percent', '.change');
  </code></pre>
  
  <p>Here's what I'm working with</p>
  
  <pre><code> &lt;div class="wrap"&gt;
  
       &lt;div class="holder"&gt;
         &lt;div id="test" class="one" data-percent="85%"&gt;&lt;span class="label"&gt;one&lt;/span&gt;
         &lt;/div&gt;
       &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;                                                             
       setTimeout(function start() {
  
         $('.bar').each(function (i) {
         var $bar = $(this);
         $(this).append('&lt;span class="count"&gt;&lt;/span&gt;')
         setTimeout(function () {
          $bar.css('width', $bar.attr('data-percent'));
          }, i * 100);
         });
  
          $('.count').each(function () {
         $(this).prop('Counter', 0).animate({
          Counter: $(this).parent('.bar').attr('data-percent')
      }, {
          duration: 2000,
          easing: 'swing',
          step: function (now) {
              $(this).text(Math.ceil(now) + '%');
          }
      });
  });
  
  }, 500)
  
      &lt;/script&gt;                                           
  &lt;/div&gt;    
  </code></pre>
  
  <p>Here is the javascript where i get data from text file. This is the data i need to replace the static data-percent value with</p>
  
  <pre><code>    var XHR = new XMLHttpRequest();
       XHR.open("GET", "file.txt", true);
       XHR.send();
       XHR.onload = function (){
       var change = document.getElementById("one").innerHTML = ( XHR.responseText.slice(6, XHR.responseText.indexOf("\n")) );
       };
  </code></pre>