按类而不是ID获取元素以影响多个项目（HTML画布图）

Question

I'm using PHP to create a foreach loop for stats using HTML5 Canvas. Now everything is working great except the JavaSscript I found to create the Canvas Graph, it gets an element by id and so only manually targets one item, not sure how I can change up this code to target any amount of items created by the PhP foreach loop.

Here is the JavaScript I found along with the HTML element (ignore the PhP variables in the data-attributes, they are returning data):

 var el = document.getElementById('graph'); // get canvas //var el = document.getElementsByClassName("chart"); var options = { percent: el.getAttribute('data-percent') || 25, color: el.getAttribute('data-color') || 0, size: el.getAttribute('data-size') || 90, lineWidth: el.getAttribute('data-line') || 3, 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('#eeeeee', 1, 100 / 100); drawCircle(options.color, options.lineWidth, options.percent / 100); 

 <div class="chart" id="graph" data-percent="<?php echo $percentage; ?>" data-color="<?php echo $color; ?>" style="color: <?php echo $color; ?>;"></div> 

using get element by class name returns an error: Uncaught TypeError: el.getAttribute is not a function

Answer 1

Ok, so getElementsByClassName returns a NodeList object. What you need to do is turn it into an array and loop over all it's elements and execute your code for each of them. Here is a minimally-changed version of how your code should work:

 // Get all the elements with 'chart' class as a NodeList object var elements = document.getElementsByClassName("chart"); // Turn the NodeList into an array elements = Array.prototype.slice.call(elements); // Loop over all the elements elements.forEach(function (el) { var options = { percent: el.getAttribute('data-percent') || 25, color: el.getAttribute('data-color') || 0, size: el.getAttribute('data-size') || 90, lineWidth: el.getAttribute('data-line') || 3, 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('#eeeeee', 1, 100 / 100); drawCircle(options.color, options.lineWidth, options.percent / 100); }); 

 <div class="chart" data-percent="100" data-color="red" style="color: red;"></div> <div class="chart" data-percent="30" data-color="red" style="color: red;"></div> 

However, this code should definitely be refactored. For instance, there is no point in declaring drawCircle function on every iteration.

Also read up on getElementByClassName , and forEach .