点击数据库加载的图片放大时出现TypeError错误求助

问题现象 #

通过AJAX从数据库拉取数据动态生成图片，点击图片调用enlargeImg函数时触发错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

错误原因 #

1. 函数参数未传递：调用enlargeImg()时没有传入图片元素，导致函数内的img参数为undefined，无法访问style属性。
2. 点击事件绑定错误：点击事件绑定在了包裹图片的<p>标签上，而非图片本身，就算传参也拿不到目标img元素。

修复方案 #

步骤1：调整点击事件绑定位置 #

把onclick直接加到<img>标签上，而非外层的<p>。

步骤2：调用函数时传入当前元素 #

调用enlargeImg(this)，将点击的img元素传递给函数。

额外优化：修正标签语法 #

原代码中<img>标签用了</img>闭合，HTML里img是自闭合标签，改为<img ... />更规范。

修正后的完整代码 #

loadSynthese函数 #

function loadSynthese(data) {
$.ajax({
    cache: false,
    url: "data/loadSynthese",
    type: "POST",
    async: true,
    data: ({
        dateid: data,
    }),
    success: function (response, status) {
            response.forEach(element => {
                let css = "";
                let idonglet = element["id_onglet"];
                let idprio = element["id_prio"];
                let texte = element["texte"];
                let image = element["image_aide"];
                
                if(image === '' || image === null || image === undefined){
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '</label>';
                } else {
                    // 把onclick移到img标签上，传入this，修正img闭合语法
                    img = '</br><img id="image'+ idprio + '" class="imageP" src="data:image/jpeg;base64,' + btoa(image) +'" onclick="enlargeImg(this)" />';
                    htmlPrio = '<div class="intPrio"><p class="titreP">Priorité ' + k + '' + pilote + '</p><img id="' + idonglet + 'imgCheck' + idprio + '" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" ' + css + ' alt="Sélectionner la priorité" data-idprio="' + idprio + '"></div><label class="textPrioSynth" onclick="selectPrioSynth(' + idonglet + ', ' + idprio + ', this)" data-idprio="' + idprio + '">' + texte + '<p class="imageP">'+img+'</p></label>';
                }
                $("#" + idonglet + "ps").append(htmlPrio);

                ((nextid == idonglet) ? k++ : k = 1);
                j++; i++;
                ((j < response.length - 1) ? nextid = response[i]['id_onglet'] : "");
            });
        }
    },
    error: function (response, status) {
    }
});}

enlargeImg函数 #

function enlargeImg(img) {
    img.style.width = "60%";
    img.style.height = "auto";
    img.style.transition = "width 0.5s ease";
}

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