如何在Django模板的for循环中向JavaScript函数传递参数——测验应用开发问题

嘿，我来帮你梳理下这个问题，顺便给你几个更稳妥的解决方案～

首先得先指出你现有代码里的两个小问题：

1. 循环里的按钮id="btn-1"会重复，这违反了HTML中id必须唯一的规则，会导致后续JS操作出问题；
2. 如果qts.answer是字符串类型（比如"A"、"B"这类选项），直接写onclick = "check(this,{{qts.answer}})"会让JS把它当成变量而非字符串，触发Uncaught ReferenceError错误。

接下来给你几个可行的替代方案，按推荐程度排序：

方案1：使用HTML data-* 属性（最推荐） #

这种方式把数据存在元素的自定义属性里，既符合HTML语义，又能彻底分离HTML结构和JS逻辑，还避免了内联事件的潜在问题。

修改后的HTML： #

{% for qts in page %}
<input type="button" 
       id="btn-{{ forloop.counter }}"  <!-- 用循环计数器保证id唯一 -->
       name="grp" 
       value="{{qts.opt1}}" 
       class="btn btn-outline-primary mt-3 quiz-option-btn"
       data-answer="{{ qts.answer|escapejs }}">  <!-- 用escapejs过滤特殊字符，保证JS语法安全 -->
{% endfor %}

对应的JavaScript（事件委托写法，高效适配动态元素）： #

// 给父容器绑定点击事件，通过事件冒泡处理按钮点击
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('quiz-option-btn')) {
    const btn = e.target;
    const correctAnswer = btn.dataset.answer;
    const userAnswer = btn.value;
    
    console.log('正确答案:', correctAnswer);
    // 这里可以写你的答案判断逻辑
  }
});

方案2：修复内联onclick的写法（适合简单场景） #

如果你坚持用内联事件，需要给字符串类型的参数加引号，同时用Django的escapejs过滤器处理特殊字符，避免破坏JS语法：

修改后的HTML： #

{% for qts in page %}
<input type="button" 
       id="btn-{{ forloop.counter }}" 
       name="grp" 
       value="{{qts.opt1}}" 
       class="btn btn-outline-primary mt-3"
       onclick="check(this, '{{ qts.answer|escapejs }}')">
{% endfor %}

你的JS函数可以保留（也可以简化）： #

function check(btn, answer) {
  const userAns = btn.value;
  console.log('正确答案:', answer);
}

方案3：全局JS对象存储数据（适合批量处理场景） #

把所有问题的答案提前存入一个全局JS对象，按钮通过问题ID来对应获取答案，适合需要批量操作问题数据的场景：

模板中先定义全局对象： #

<script>
// 把所有问题的答案存入全局对象
const quizData = {
  {% for qts in page %}
    "{{ qts.id }}": "{{ qts.answer|escapejs }}",
  {% endfor %}
};
</script>

按钮HTML： #

{% for qts in page %}
<input type="button" 
       id="btn-{{ qts.id }}" 
       name="grp" 
       value="{{qts.opt1}}" 
       class="btn btn-outline-primary mt-3"
       onclick="check(this, '{{ qts.id }}')">
{% endfor %}

JS函数： #

function check(btn, questionId) {
  const correctAnswer = quizData[questionId];
  const userAns = btn.value;
  console.log('正确答案:', correctAnswer);
}

内容的提问来源于stack exchange，提问作者charanjeet singh