How to use the same JS for same HTML multiple times

Question

I used this from another stackoverflow question: http://jsfiddle.net/Aapn8/3410/ to create circle progress bars.

Except when I'm trying to create more then 1, nothing happens how can you clean fix this without copying the JavaScript and change just 1 var.

This is my code:

 .circleWrapper { width: 250px; float: left; } .circleText {} .circleTextSmall {} #graph div { position: relative; margin: 80px; width: 220px; height: 220px; } #graph canvas { display: block; top: 0; left: 0; } #graph span { color: #555; display: block; line-height: 220px; text-align: center; width: 220px; font-family: sans-serif; font-size: 40px; font-weight: 100; margin-left: 5px; } #graph input { width: 200px; } 

 <div class="circleWrapper"> <div class="chart" id="graph" data-percent="50"></div> <div class="circleText">HTML/CSS</div> <div class="circleTextSmall">Small text</div> </div> <div class="circleWrapper"> <div class="chart" id="graph" data-percent="45"></div> <div class="circleText">PHP</div> <div class="circleTextSmall">Small text</div> </div> 

Answer 1

Use functions

Put your code inside a function which accepts some way of identifying a particular element, then call that function multiple times. Here's a fork of that fiddle as a working example:

function startGraph(el) { // turn it into a function which accepts an element

  // (Nothing else has changed)
  var options = {
      percent:  el.getAttribute('data-percent') || 25,
      size: el.getAttribute('data-size') || 220,
      lineWidth: el.getAttribute('data-line') || 15,
      rotate: el.getAttribute('data-rotate') || 0
  }

  var canvas = document.createElement('canvas');
  var span = document.createElement('span');
  span.textContent = options.percent + '%';

  if (typeof(G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
  }

  var ctx = canvas.getContext('2d');
  canvas.width = canvas.height = options.size;

  el.appendChild(span);
  el.appendChild(canvas);

  ctx.translate(options.size / 2, options.size / 2); // change center
  ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg

  //imd = ctx.getImageData(0, 0, 240, 240);
  var radius = (options.size - options.lineWidth) / 2;

  var drawCircle = function(color, lineWidth, percent) {
      percent = Math.min(Math.max(0, percent || 1), 1);
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = color;
          ctx.lineCap = 'round'; // butt, round or square
      ctx.lineWidth = lineWidth
      ctx.stroke();
  };

  drawCircle('#efefef', options.lineWidth, 100 / 100);
  drawCircle('#555555', options.lineWidth, options.percent / 100);
}

Assuming each element has class="chart" then you can get all the elements and call the function with each one:

// Get all charts:
var myCharts=document.getElementsByClassName("chart");

// For each one..
for (var i in myCharts) {
   // Start it:
   startGraph(myCharts[i]);
}

Answer 2

 var els = document.getElementsByClassName("chart"); for(var i=0; i < els.length; i++){ var el = els[i]; var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineWidth: el.getAttribute('data-line') || 15, rotate: el.getAttribute('data-rotate') || 0 } var canvas = document.createElement('canvas'); var span = document.createElement('span'); span.textContent = options.percent + '%'; if (typeof(G_vmlCanvasManager) !== 'undefined') { G_vmlCanvasManager.initElement(canvas); } var ctx = canvas.getContext('2d'); canvas.width = canvas.height = options.size; el.appendChild(span); el.appendChild(canvas); ctx.translate(options.size / 2, options.size / 2); // change center ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg //imd = ctx.getImageData(0, 0, 240, 240); var radius = (options.size - options.lineWidth) / 2; var drawCircle = function(color, lineWidth, percent) { percent = Math.min(Math.max(0, percent || 1), 1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); ctx.strokeStyle = color; ctx.lineCap = 'round'; // butt, round or square ctx.lineWidth = lineWidth ctx.stroke(); }; drawCircle('#efefef', options.lineWidth, 100 / 100); drawCircle('#555555', options.lineWidth, options.percent / 100); } 

 div { position:relative; margin:80px; width:220px; height:220px; } canvas { display: block; position:absolute; top:0; left:0; } span { color:#555; display:block; line-height:220px; text-align:center; width:220px; font-family:sans-serif; font-size:40px; font-weight:100; margin-left:5px; } input { width: 200px; } span { } 

 <div class="chart" data-percent="88"></div> <div class="chart" data-percent="78"></div> 

Answer 3

You have used the graph ID twice. You can only use an ID once per document.

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

More information on this can be found here .

Change the ID to something else and change the JS to interact with both elements.

This can for example be done with getElementsByClassName() . This function returns an array of elements instead of a single element.

I think it is best if you wrap all your functionality in a function with the following signature:

function startGraph(el) {
    ...
}

and then call the function from this for-loop:

var elements = document.getElementsByClassName("chart");
var i;
for (i = 0; i < x.length; i++) {
    startGraph(elements[i]);
}

More information on that can be found here .

Answer 4

All you need to do is to define unique ids in your HTML , and define an array of all your graph elements and loop through the logic, see this as an example:

 var elements = [{ 'id': 'graph1' }, { 'id': 'graph2' }]; for (var i = 0; i < elements.length; i++) { var el = document.getElementById(elements[i]['id']); var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineWidth: el.getAttribute('data-line') || 15, rotate: el.getAttribute('data-rotate') || 0 } var canvas = document.createElement('canvas'); var span = document.createElement('span'); span.textContent = options.percent + '%'; if (typeof(G_vmlCanvasManager) !== 'undefined') { G_vmlCanvasManager.initElement(canvas); } var ctx = canvas.getContext('2d'); canvas.width = canvas.height = options.size; el.appendChild(span); el.appendChild(canvas); ctx.translate(options.size / 2, options.size / 2); // change center ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg //imd = ctx.getImageData(0, 0, 240, 240); var radius = (options.size - options.lineWidth) / 2; var drawCircle = function(color, lineWidth, percent) { percent = Math.min(Math.max(0, percent || 1), 1); ctx.beginPath(); ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false); ctx.strokeStyle = color; ctx.lineCap = 'round'; // butt, round or square ctx.lineWidth = lineWidth ctx.stroke(); }; drawCircle('#efefef', options.lineWidth, 100 / 100); drawCircle('#555555', options.lineWidth, options.percent / 100); } 

 div { position: relative; margin: 80px; width: 220px; height: 220px; } canvas { display: block; position: absolute; top: 0; left: 0; } span { color: #555; display: block; line-height: 220px; text-align: center; width: 220px; font-family: sans-serif; font-size: 40px; font-weight: 100; margin-left: 5px; } input { width: 200px; } span {} 

 <div class="chart" id="graph1" data-percent="88"></div> <div class="chart" id="graph2" data-percent="25"></div>