Enlarge a picture after clicking on it-CodePudding

I need to enlarge a picture when I click on it. The problem is that I get this image in my javascript from my database and I don't know how I can do it to change the size of my picture after the click

Here is the js function that use data to create the picture

function loadSynthese(data) {
$.ajax({
    cache: false,
    url: "data/loadSynthese",
    type: "POST",
    async: true,
    data: ({
        dateid: data,
    }),
    success: function (response, status) {

            response.forEach(element => {
                css = "";
                idonglet = element["id_onglet"];
                idprio = element["id_prio"];
                texte = element["texte"];
                image = element["image_aide"];
                
                
                if(image === '' || image === null || image === undefined){
                    htmlPrio = '<div ><p >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  onclick="selectPrioSynth('   idonglet   ', '   idprio   ', this)" data-idprio="'   idprio   '">'   texte   '</label>';
                } else {
                    img = '</br><img id="image'  idprio   '"  src="data:image/jpeg;base64,'   btoa(image)  '">';
                    htmlPrio = '<div ><p >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  onclick="selectPrioSynth('   idonglet   ', '   idprio   ', this)" data-idprio="'   idprio   '">'   texte   '<p  onclick="enlargeImg()">'  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) {
    }
});}

And here he function i want to add to change the size of the picture

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

And When i click on the picture I have this issue : "Uncaught TypeError: Cannot read properties of undefined (reading 'style')"

CodePudding user response：

You can add or remove a css class some-name which has transform:scale(1.5) whereas your img has transition: 0.5s

img {
  transition: 0.5s;
}

img:hover,
.some-class {
  transform: scale(1.5)
}

<img src="https://picsum.photos/200" style="margin:40px">