How to use a {{key}} from Django in JavaScript

Question

Javascript cannot find element by id using {{key}}

How can I access the {{key}} in my script?

Script

window.onload = jQuery(function ($) {
    var duration = document.getElementById("#timerseconds{{key}}").value;
    duration = 10800 - duration;
    display = $("#counter{{key}}");
    startTimer(duration, display);
});

HTML / DJANGO

{% for key, value in list_cooking.items %}

 <li class="list-group-item">
 <p>{{key}}</p>
 <br></br>
 <p>Seconds:</p><p id='counter{{key}}'>00</p>
 <input id="timerseconds{{key}}" type="hidden" value="{{value}}">
 </li>

Console

jQuery.Deferred exception: Cannot read property 'value' of null TypeError: Cannot read property 'value' of null

jquery.min.js:2 Uncaught TypeError: Cannot read property 'value' of null
    at HTMLDocument.<anonymous> (main.js:78)

Rendered HTML

<li class="list-group-item">
   <p>Beef</p>
   <br>
   <p>Seconds:</p>
   <p id="#counterBeef">00</p>
   <input id="timersecondsBeef" type="hidden" value="5417">
</li>

VIEW

time_since = AddCooking.objects.raw("select * from heatcook_addcooking where time_start > now() - interval '180 minutes'")

for item in time_since:
        list_cooking[item.foodfk.name] = (int((time_now - item.time_start).total_seconds()))

Solution:
Use inside the for loop

{% for key, value in list_cooking.items %}
   <script>Script here</script>
   <li class="list-group-item">
   <p>{{key}}</p>
   <br></br>
   <p>Seconds:</p><p id='counter{{key}}'>00</p>
   <input id="timerseconds{{key}}" type="hidden" value="{{value}}">
   </li>

Your JS isn't working because {{key}} is not defined outside the for-loop. You'll rather have to select elements using class names, rather than IDs. — xyres
– xyres, Commented Jun 25, 2020 at 4:57
Using the <script> inside the loop I could access {{key}} Thanks! — Paulo
– Paulo, Commented Jun 25, 2020 at 10:50

Michael Hawkins · Accepted Answer · 2020-06-25 01:58:47Z

1

You have to also iterate over the JavaScript code in the template:

{% for key, value in list_cooking.items %}
     <li class="list-group-item">
     <p>{{key}}</p>
     <br></br>
     <p>Seconds:</p><p id='counter{{key}}'>00</p>
     <input id="timerseconds{{key}}" type="hidden" value="{{value}}">
     </li>
     <script type="text/javascript">
         window.onload = jQuery(function ($) {
            var duration = $("#timerseconds{{key}}").val();
            duration = 10800 - duration;
            display = $("#counter{{key}}");
            startTimer(duration, display);
        });
    </script>
{% endfor %}

edited Jun 25, 2020 at 1:58

answered Jun 25, 2020 at 1:26

Michael Hawkins

2,8691 gold badge22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Paulo Over a year ago

Still get null var duration = document.getElementById("#timerseconds{{key}}").value;

Michael Hawkins Over a year ago

I updated it to use JQuery instead. see if that works.

Michael Hawkins Over a year ago

If that still doesn't work, please send the source of the rendered HTML page to ensure your key and value are rendering properly. Also post how you are creating the cooking_list object.

Paulo Over a year ago

The JQuery is working. With the script inside the loop i could get {{key}} Thanks Michael!

Collectives™ on Stack Overflow

How to use a {{key}} from Django in JavaScript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related