使用for循环时如何从Django模板将参数传递给javascript

Question

I am creating a quiz application using django. I am facing a problem in sending paramter to my javascript function from django template.

Html Code.

{% for qts in page %}

<input type="button" id ="btn-1" name="grp" value="{{qts.opt1}}" class="btn btn-outline-primary mt-3" onclick = "check(this,{{qts.answer}})">

Javascript Code

function check(btn,answer) {
   var user_ans_id = btn.id;
   var user_ans = document.getElementById(user_ans_id).value;
   console.log(answer);
}

Is there any other solution.

Thanks in Advance!

Answer 1

A simpler and cleaner way of achieving the desired output can be implemented as follows using jquery

    {% for qts in page %}
    <input type="button" value="{{qts.opt1}}" class="quest-btn" data-answer="{{qts.answer}}" />
    {% endfor %}
    <script>
        $(".quest-btn").click((e) => {
            const targetElement = e.target;
            console.log(
                targetElement.dataset.answer,
                targetElement.value
            );
        });
    </script>

In the about code quest-class is just a dummy class to attach click event listener to multiple button you can use any common class in buttons.

to know more about jquery click event listener check this out

for more info about data-attributes check this