How can set jinja variable in javascript function?

Question

function show_modal(val1, val2){
    {% set msg1 = val1 %}
    {% set msg2 = val2 %}
    document.getElementById('id01').style.display='block'
}

I have calling show_modal() function in some where in the template.

Needs each time assigning situational values to msg1 and msg2

Not working. Each not working below:

function show_modal(){
    {% set msg1 = "Delete Column" %}
    {% set msg2 = "Are you sure you want to delete this column?" %}
    document.getElementById('id01').style.display='block'
}

May I show different prompts with this part of code? (Which is invisible by default)

<div id="id01" class="modal">
        <h1>{{ msg1 }}</h1>
        <p>{{ msg2 }}</p>
</div>

Answer 1

You have to use pure js for this, try something like this:

function show_modal(){
   let msg1 = "Delete Column";
   let msg2 = "Are you sure you want to delete this column?";
   document.getElementById("id01").innerHTML=`
     <h1>${msg1}</h1>
     <p>${msg2}</p>`;
   document.getElementById('id01').style.display='block'
 }

<div id="id01" class="modal">
</div>