calling javascript function inside html element and jinja2?

Question

i have this code:

{% for review in reviews %}
   <div>
     {{ review.content }}
       by {{ review.username }}
       - timeDifference("{{ review.date_submitted }}")
   </div>
{% endfor %}

on the 5th line is a js function timeDifference that will return time difference in text, I want to insert js function there, how do I do that?

Raja Simon · Answer 1 · 2018-09-28T07:18:03.930

0

Execute Js function like that is not possible. And what possible is during onload time execute the javascript function and do DOM manipulation.

In Html

<-- In for loop -->
<div onload="timeDifference( {{ review.id }}, {{ review.date_submitted }} );">
  <p id="timeDifferenceElement{{ review.id }}"></p>
</div>

In Javascript

function timeDifference(id, date_submitted) {
  const timeDifferenceElement = document.getElementById("timeDifferenceElement" + id)
  // Do calculation
  ---
  timeDifferenceElement.innerHTML = "something from the calculation"
}

edited Sep 28 '18 at 07:18

answered Sep 28 '18 at 06:16

Raja Simon

10,126
5
43
74

hi, just wondering, I am doing it in a loop, i have confusion how to reference the element? – gpbaculio Sep 28 '18 at 06:37
Oh.. Let me modify the example then. – Raja Simon Sep 28 '18 at 06:38
@iamgpbaculio Changed the example in the answer. Let me know if you have any additional questions' – Raja Simon Sep 28 '18 at 06:40
i have tested it but suddenly the function on onload isn't firing :/ – gpbaculio Sep 28 '18 at 07:00
Wait I made the mistake there. Please see the update – Raja Simon Sep 28 '18 at 07:17

score 0 · Answer 2 · answered Sep 28 '18 at 07:13

this is the solution that worked for me, inspired by Raja Simons' answer and How to add onload event to a div element?:

<div id="review{{review.id}}">
   {{ review.content }} by {{ review.username }}
     -
   <p id="timeDifferenceElement{{ review.id }}"></p>
   <script type="text/javascript">
    timeDifferenceForDate( '{{ review.id }}', '{{ review.date_posted }}' );
   </script>

calling javascript function inside html element and jinja2?

2 Answers2