0

Добрый день. Не могу вывести несколько div, работает только первый.
Как вообще сделать вывод нескольких элементов?

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>

12
  • 10
    Согласно стандарту HTML, ID должен быть уникален в рамках всего документа. Поэтому, идеологически верный ответ на ваш вопрос -- никак. (Но при желании можно использовать какой-нибудь костыль на основе обхода DOM, если речь о чистом JS.) Commented 19 июл. 2016 в 10:54
  • @DmitriySimushev если к id подставлять цифры, то он будет уникальным.
    – gm-111
    Commented 19 июл. 2016 в 10:56
  • Да, но это не имеет ничего общего с вашим вопросом Commented 19 июл. 2016 в 10:56
  • а зачем там вообще Id если уже есть class="chart"?
    – Grundy
    Commented 19 июл. 2016 в 11:02
  • @Grundy тоже хотел спросить у него) зачем ему id, если есть класс chart))
    – E1mir
    Commented 19 июл. 2016 в 11:08

1 ответ 1

4

Вам абсолютно правильно делают замечание, что ID в рамках страницы должен быть уникальным. Однако, если прямо-таки кровь из носу нужно выбрать именно такие элементы, тогда воспользуйтесь следующим селектором для выборки элементов:

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.