Good day. I can not display several div , only the first one works.
How to make a conclusion of several elements

 var el = document.getElementById('graph'); // get canvas 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; } 
 <div class="chart" id="graph" data-percent="88"></div> <div class="chart" id="graph" data-percent="100"></div>

  • ten
    According to the HTML standard, the ID must be unique throughout the document. Therefore, the ideologically correct answer to your question - no way . (But if you wish, you can use some crutch based on the DOM bypass if you are talking about pure JS.) - Dmitriy Simushev
  • @DmitriySimushev if you substitute digits for id, it will be unique. - gm-111
  • Yes, but it has nothing to do with your question - Dmitriy Simushev
  • and why is there generally Id if you already have class="chart" ? - Grundy
  • @Grundy also wanted to ask him why he id , if there is a class chart )) - E1mir

1 answer 1

You absolutely correctly make the remark that the ID within the page must be unique. However, if you really need to choose such elements from the nosebleed, then use the following selector to select the elements:

 document.querySelectorAll('[id="header"]');