在 HTML/Javascript 中使用计数器变量的正确方法

Question

I am using Django and Chart.js, but I don't think what's more important here is an understanding of Javascript and HTML.

To create charts using Chart.js, I need the charts to have different names. For this, I have thought about using a counter variable.

    <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>

However, when I look in the source code on my dev server, I can see that the id for all of the canvas tags is simply "myChart". Why is this? What am I doing wrong?

Answer 1

Try this:

{{ forloop.counter }} will return the current iteration count going on.

<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>