Javascript:HTML5画布和带有getElementById的id循环

我对Javascript非常熟悉，我想在Django模板中使用canvas和Javascript

我有一个小的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>

第一个代码仅显示第一个画布对象（这是正常的）。第二个应该显示每个画布对象，但它不工作。它什么也不显示

我的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.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>

{%用于publication.documents.all%}
{%endfor%}
pdfjsLib.getDocument（'http://localhost:8000/media/media/loremipsum2.pdf）。然后（函数（pdf）{
console.log（“加载pdf”）；
getPage（1）。然后（函数（第页）{
var标度=0.40；
var viewport=page.getViewport（比例）；
var canvas=document.getElementsByTagName（'canvas'）；
var context=canvas.getContext（'2d'）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
});
});

我做对了吗？你想在多张画布上循环吗？由于问题没有标记为Django，我不知道“动态变量”是什么：D。但也许这段代码可以帮助您：

您应该迭代

document.getElementsByTagName（'canvas'）

返回的所有画布对象，但您将其视为单个对象

let canvases=Array.from（document.getElementsByTagName（“canvas”）；
canvases.forEach（canvas=>{
设ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,100,50）；
});
画布{
边框：1px纯黑；
高度：100px；
宽度：100px；
}
我做对了吗？你想在多张画布上循环吗？由于问题没有标记为Django，我不知道“动态变量”是什么：D。但也许这段代码可以帮助您：

您应该迭代
document.getElementsByTagName（'canvas'）
返回的所有画布对象，但您将其视为单个对象


let canvases=Array.from（document.getElementsByTagName（“canvas”）；
canvases.forEach（canvas=>{
设ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“红色”；
ctx.fillRect（0,0,100,50）；
});
画布{
边框：1px纯黑；
高度：100px；
宽度：100px；
}

document.getElementById
将只返回单个对象，因为html页面上应该只有一个具有单个id的元素。您可以使用
document.getElementsByTagName（'canvas'）
或将类赋予canvas并使用
document.getElementsByClassName（'classname'）
@ArunKumar这就是为什么我的id与内部的django变量是动态的。它永远不会是相同的id。它仍然会返回单个对象。您必须使用tag或class来检索列表。tag或class不起作用。您可以共享用于tag的代码吗？
文档。getElementById
将只返回单个对象，因为html页面上应该只有一个具有单个id的元素。您可以使用
document.getElementsByTagName（'canvas'）
或将类赋予canvas并使用
document.getElementsByClassName（'classname'）
@ArunKumar这就是为什么我的id与内部的django变量是动态的。它永远不会是相同的id。它仍然会返回单个对象。您必须使用tag或class来检索列表tag或class不起作用您可以共享您用于tag的代码吗？对您的答案进行了一些编辑，我们还尝试远离问候语和签名，以保持答案的重点。最后一个建议，避免写编辑：并添加更多内容，只需重写您的答案，并根据需要进行修改。@Elias.G是的，这正是我想要的！我不认为我也需要在画布上打圈。现在，我只需要看看如何传递变量来代替我的pdf localhost url:）之类的东西
document.location=”“+PDFname
或使用
document.url
获取url在我的模板中我有一个变量
{{document.upload}}
，所以我想这样做：
pdfjsLib.getDocument（'http://localhost:8000/media/“+{{document.upload}}）
谢谢你，我得看看；）对你的答案做了一些修改，我们也尽量远离问候语和签名，让答案切中要害。最后一个建议，避免写编辑：并添加更多内容，只需重写您的答案，并根据需要进行修改。@Elias.G是的，这正是我想要的！我不认为我也需要在画布上打圈。现在，我只需要看看如何传递变量来代替我的pdf localhost url:）之类的东西
document.location=”“+PDFname
或使用
document.url
获取url在我的模板中我有一个变量
{{document.upload}}
，所以我想这样做：
pdfjsLib.getDocument（'http://localhost:8000/media/“+{{document.upload}}）
谢谢你，我得看看；）
{% 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>