Javascript: HTML5 холст и цикл id с getElementById

Question

Я довольно новичок в Javascript, и я хотел бы использовать canvas с javascript в моем шаблоне Django.

У меня есть небольшая html-часть и часть javascript, которая выглядит следующим образом:

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

Я пытаюсь использовать PDF.js, чтобы сделать некоторые вещи.В моем коде javascript я хотел бы обработать getElementById, чтобы зациклить динамический идентификатор холста html.

Итак, у меня есть этот код:

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas{{document.id}}"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas{{document.id}}');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

Первый код отображает толькопервый объект холста (это нормально).Второй должен отображать каждый объект холста, но он не работает.Ничего не отображает

Я допустил какую-либо ошибку в своем коде JavaScript?

Спасибо

Редактировать:

Код с циклом над тегом <canvas>:

{% for document in publication.documents.all %}
<td class="col-md-1">
    <canvas id="the-canvas"></canvas>
</td>
{% endfor %}

<script>
  pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementsByTagName('canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
            canvasContext: context,
            viewport: viewport
        };
        page.render(renderContext);
    });
  });
</script>

Answer 1

Я правильно понял, что вы хотите зациклить несколько холстов?Поскольку вопрос не был помечен Django, я понятия не имею, что это за "динамическая переменная": D.Но, возможно, вам поможет этот блок кода:

Вам следует перебирать все объекты холста, возвращаемые document.getElementsByTagName('canvas'), но вы рассматриваете его как один объект

let canvases = Array.from(document.getElementsByTagName("canvas"));
canvases.forEach(canvas => {
  let ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 100, 50);
});

canvas {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}

<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>

В вашем примере это будет выглядеть так:

pdfjsLib.getDocument('http://localhost:8000/media/media/loremipsum2.pdf').then(function (pdf) {
    console.log("pdf loaded");
    pdf.getPage(1).then(function (page) {
        var scale = 0.40;
        var viewport = page.getViewport(scale);

        var canvases = document.getElementsByTagName('canvas');
        Array.from(canvases).forEach((canvas) => {
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            page.render(renderContext);
        });
    });
  });

Редактировать: вы можете использоватьтакие вещи, как:

let can = Array.from(document.getElementsByClassName(<className>);
let can = Array.from(document.querySelectorAll(<CSS query>);
...

Если нужного в списке нет, просто спросите: 3