title: How to customize percentage increments of an element's width via JavaScript?
body: <p>I am having trouble changing the width of an element each time on click.
  Right now, everytime the function is run, the width increases by 1%.</p>
  
  <p>I want to be able to pass in a parameter/argument in the function that will allow me to customize the percentage increments on click.</p>
  
  <p>i.e. have the percentage increase by 5's every click, or increase the percentage by 10's or 25's on click.</p>
  
  <p>Here is the function I have so far:</p>
  
  <pre><code>function progressBar(clickElement){
     document.getElementById(clickElement).onclick = function(){
        var progress = document.getElementById("progress");
        var current_width = progress.style.width.replace("%", " ");
        var currentWidth = document.getElementById("currentWidth");
        current_width = (current_width &gt; 100) ? 100 : current_width;
        currentWidth.innerHTML = "Progress: " + current_width++ + "%";
        progress.style.width = parseInt(current_width) + "%";
     }
  }
  </code></pre>
  
  <p>note this line of code:</p>
  
  <pre><code>   var current_width = progress.style.width.replace("%", " ");
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
     &lt;div id="loader"&gt;
        &lt;div id="progress"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="currentWidth"&gt;&lt;/div&gt;
  &lt;input id="increase" type="submit" value="Increase"&gt;
  </code></pre>
  
  <p></p>
  
  <p>What can I change or add to this function that will allow me to customize the percentage increments?</p>
  
  <p>Thank you in advance!</p>