How to pass a jinja variable to javascript

Question

I'm using Flask and I'm rendering in my template a list (list of lists: the icon_name_list). Then in a jinja for loop I'm creating input elements that everyone is getting an id.

views.py

    icon_name_list = []
    journeys = session.query(Journeys).all()
    for journey in journeys:
        icon_name_list.append([journey.id, journey.city,journey.date])
return render_template("ReadyToGo.html", icon_name_list=icon_name_list)

ReadyToGo.html

{% for title in icon_name_list %}
   <input type="button" id="{{ title[1] }}_{{ title[2] }}" class="btn btn-prI'mary btn-prI'mary" style="margin:1px;"><span class="glyphicon glyphicon-plane"></span> {{ title[1]~' '~title[2] }}<br>
   {% endfor %}

title[1] is a string, the name of a city let's say London and title[2] is also a string, a particular date let's say 2021-02-20. So my input elements are:

<input type="button" id="London_2021-02-20" class="btn btn-prI'mary btn-prI'mary" style="margin:1px;"> 

etc. At least they appear like this in control in chrome.

The thing is that I'm trying to make a javascript function so when I click a button with the particular id something happens. But I can't make javascript to read the id(s). I'm trying

function listen2() {
    document.querySelector("#{{ title[1]}}_{{ title[2] }}").addEventListener('click', createform2);
}
document.addEventListener('DOMContentLoaded', listen2);

I can't find out the proper way to make js read the id(s) '{{ title[1]}}_{{ title[2] }}'. I'm getting

"Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#{{ title[1]}}_{{ title[2] }}' is not a valid selector. at HTMLDocument.listen2 "

i test it with some normal id and it works fine. So I guess the problem isn't on the rest of the code. I tryied with JSON or set key as variable with some ways and so many more, or change the syntax inside the document.querySelector but I couldn't find the way. And the thing is, I think its really interesting in many occasions if there is the ability to create elements with a unique id(s) via a loop or with some jinja code. Thanks so much in advance

Answer 1

Initial you are running a loop. So you will get some data for the variable title . But inside Javascript you are running any loop.

You can add event listener function for the input.

<input onclick=fun() ...>

And in Javascript, you can access that element by using this keyword.

function fun(){
    this.value
    this.id
}

Answer 2

I found a solution but not exactly what i was looking for. I made something like this:

<input type="button"  name="{{ title[0] }}_{{ title[1] }}" onclick="createform2(name)"

and in javascript:

function createform2(name) {

field1.setAttribute('name', name);

so im passing the jinja variable to javascript function as a parameter to the function. I could do the same with id but i prefered the name because this way it was more efficient for my purpose.

Hope someone knows how else its possible to pass a jinja variable(value) to javascript.