![](/img/trans.png)
[英]Storing a variable in the JavaScript 'window' object is a proper way to use that object?
[英]Proper way to use a counter variable in HTML/Javascript
我正在使用 Django 和 Chart.js,但我不认为这里更重要的是了解 Javascript 和 Z4A44DBAD5FCAED2E0378.C
要使用 Chart.js 创建图表,我需要图表具有不同的名称。 为此,我考虑过使用计数器变量。
<script>**var count = 0;**</script>
<ul>
{% for object in objects %}
<li>
...
<script>
{% block jquery %}
console.log(count);
var endpoint = '/api/chart/data/';
fetch(endpoint, {
method: "GET",
}).then(response => response.json())
.then(data => {
console.log('Success:', data);
**count = count + 1;**
...
eval('var chart_id = "myChart{{ count }}"');
eval('var ctx{{ count }} = document.getElementById(chart_id)');
eval('var myChart = new Chart(ctx{{ count }}, graph_data)');
console.log("myChart{{ count }}")
})
.catch((error) => {
console.log("Error:")
console.log(error);
});
{% endblock %}
</script>
<canvas id= "myChart{{ count }}" width="400" height="400"></canvas>
...
</li>
{% endfor %}
</ul>
但是,当我查看开发服务器上的源代码时,我可以看到所有 canvas 标记的 id 都只是“myChart”。 为什么是这样? 我究竟做错了什么?
尝试这个:
{{ forloop.counter }}
将返回当前的迭代计数。
<ul>
{% for object in objects %}
<li>
...
<script>
{% block jquery %}
console.log(count);
var endpoint = '/api/chart/data/';
fetch(endpoint, {
method: "GET",
}).then(response => response.json())
.then(data => {
console.log('Success:', data);
...
eval('var chart_id = "myChart{{ forloop.counter }}"');
eval('var ctx{{ forloop.counter }} = document.getElementById(chart_id)');
eval('var myChart = new Chart(ctx{{ forloop.counter }}, graph_data)');
console.log("myChart{{ forloop.counter }}")
})
.catch((error) => {
console.log("Error:")
console.log(error);
});
{% endblock %}
</script>
<canvas id= "myChart{{ forloop.counter }}" width="400" height="400"></canvas>
...
</li>
{% endfor %}
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.