如何向JS函数传递动态ID并正确使用getElementById获取元素

你的核心问题是ID字符串的引号嵌套错误，导致getElementById无法匹配到目标元素，同时存在点击事件绑定逻辑冗余的问题。

错误原因拆解 #

1. Razor生成的img元素ID是myImg 图片路径（比如myImg /images/1.jpg），本身不带双引号
2. JS代码中var string = "myImg ${item}"`` 给ID额外套了一层双引号，变成"myImg /images/1.jpg"
3. 后续getElementById("${string}")又多套了一层引号，最终查找的ID是""myImg /images/1.jpg""，完全和实际元素ID不匹配

修复方案 #

方案1：修正ID字符串的引号处理 #

直接拼接正确的ID格式，去掉多余的引号嵌套：

function myFunction(item){
    // 直接拼接正确的ID，无需额外加引号
    const imgId = `myImg ${item}`;
    const modal = document.getElementById("myModal");
    const img = document.getElementById(imgId);
    const modalImg = document.getElementById("img01");
    const captionText = document.getElementById("caption");

    // 无需给img重复绑定onclick，直接执行弹窗逻辑
    modal.style.display = "block";
    modalImg.src = img.src;
    captionText.innerHTML = img.alt;

    // 关闭弹窗逻辑（建议移到函数外，避免重复绑定）
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
    }
}

方案2：更优雅的方式——直接传递元素（推荐） #

跳过ID查找步骤，直接把img元素作为参数传入函数，减少ID依赖：

Razor视图修改：

<div id="product-zoom-gallery" class="product-image-gallery">
    @foreach (var item in Model.Images)
    {
        <a onclick="myFunction(this.querySelector('img'))" class="product-gallery-item active" href="#"
           data-image="/@item"
           data-zoom-image="/@item">
            <img src="/@item" alt="产品图片">
        </a>
    }
</div>

JS函数修改：

function myFunction(img){
    const modal = document.getElementById("myModal");
    const modalImg = document.getElementById("img01");
    const captionText = document.getElementById("caption");

    modal.style.display = "block";
    modalImg.src = img.src;
    captionText.innerHTML = img.alt;

    // 关闭弹窗逻辑
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
        modal.style.display = "none";
    }
}

额外优化建议 #

1. 避免重复绑定事件：关闭弹窗的逻辑不要放在myFunction里，否则每次点击都会重复绑定事件，建议在页面加载完成后只绑定一次：

document.addEventListener('DOMContentLoaded', function() {
    const modal = document.getElementById("myModal");
    const span = document.getElementsByClassName("close")[0];
    
    span.onclick = function () {
        modal.style.display = "none";
    }
    
    // 点击模态框背景也关闭弹窗
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
});

2. 规范元素ID：不要让ID包含空格、斜杠等特殊字符，可对item做格式处理：

<img id="myImg_@item.Replace("/", "_")" src="/@item" alt="产品图片">

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