HTML循环中动态ID与onclick传参问题求助

问题1：动态ID生成失败，无法获取元素 #

你用了JavaScript的模板字符串语法 ${i} 生成ID，但后端模板引擎（如Django/Jinja2）不识别该语法，导致最终渲染出的ID是字面量mylink-${i}，而非带实际变量值的动态ID，自然无法被JS获取。

解决方式：
改用模板引擎的变量输出语法拼接ID，假设i有唯一标识字段（如id或room），直接用{{ i.id }}（或对应字段）替换：

<span class="name-meta" id="mylink-{{ i.id }}"> {{i.name}} </span>

渲染后会生成mylink-1、mylink-2这类真实动态ID，前端JS就能通过document.getElementById("mylink-"+id)正确定位元素。

问题2：onclick触发时提示i is not defined #

模板渲染时，onclick="theFunction(i)"里的i会被直接输出为字面量字符串，而前端JS环境中不存在名为i的变量，因此报错。需要把后端i的具体值通过模板引擎注入到onclick参数中。

解决方式：
直接用模板变量输出i的具体字段值，比如{{ i.id }}，渲染后onclick会变成theFunction(1)这类带真实值的调用：

<a href="{% url "start_chat" i.room %}" onclick="theFunction({{ i.id }})">

更规范的做法是使用data-*属性存储参数，再通过事件委托获取，避免直接在onclick中写模板变量：

<a href="{% url "start_chat" i.room %}" data-room-id="{{ i.id }}" class="chat-link">

对应JS逻辑：

document.querySelectorAll('.chat-link').forEach(link => {
  link.addEventListener('click', function() {
    const id = this.dataset.roomId;
    const mylink = document.getElementById(`mylink-${id}`);
    // 后续业务逻辑
  });
});

完整修正代码 #

基础写法（直接修改onclick和ID） #

<div class="row sideBar">
    {% for i in data %}
        <div class="row sideBar-body">
            <div class="col-sm-9 col-xs-9 sideBar-main">
                <div class="row">
                    <a href="{% url "start_chat" i.room %}" onclick="theFunction({{ i.id }})">
                        <div class="col-sm-8 col-xs-8 sideBar-name">
                            <span class="name-meta" id="mylink-{{ i.id }}"> {{i.name}} </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

const rooms = JSON.parse(document.getElementById('data').textContent)

function theFunction(id) {
    var mylink = document.getElementById("mylink-"+id)
    // 添加获取元素后的操作逻辑
}

推荐写法（事件委托） #

<div class="row sideBar">
    {% for i in data %}
        <div class="row sideBar-body">
            <div class="col-sm-9 col-xs-9 sideBar-main">
                <div class="row">
                    <a href="{% url "start_chat" i.room %}" data-room-id="{{ i.id }}" class="chat-link">
                        <div class="col-sm-8 col-xs-8 sideBar-name">
                            <span class="name-meta" id="mylink-{{ i.id }}"> {{i.name}} </span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

const rooms = JSON.parse(document.getElementById('data').textContent)

document.querySelector('.sideBar').addEventListener('click', function(e) {
    const link = e.target.closest('.chat-link');
    if (link) {
        const id = link.dataset.roomId;
        const mylink = document.getElementById(`mylink-${id}`);
        // 后续业务逻辑
    }
});

内容的提问来源于stack exchange，提问作者Batu Solmaz