Variable php vers javascript

tom256
Javascript
PHP

Bonjour,

J'ai actuellement créé une page qui me permet de modifier les informations d'une BDD.
Actuellement j'affiche tous les résultats dans un tableau et en cliquant sur l'icône modifier cela me lance un script popupmodifier qui luit m'affiche un pop-up avec un formulaire préremplit avec les informations de la BDD

<IMG class="icone" title="icone pour modifier" src="images/crayon.png" alt="icone pour modifier" onclick ="popupmodifier(\''.$variable1.'\', \''.$variable2.'\', \''.$variable3.'\')"/>

Cela marche bien mais on m'a dit que onclick n'est plus trop utilisé et que maintenant on passe à "element.addEventListener" mais je n'arrive pas à comprendre comment je peux récupérer les variables de la ligne que je souhaite modifier ?

Merci de votre aide

2 réponses

popotte
Réponse acceptée

Hello, alors onclick c'est toujours utilisé selon le besoin et ça fonctionne parfaitement, addEventListenner c'est plus récent mais les deux fonctionnent bien

Si tu veux passer par addEventListenner il faudrait utiliser les data-attributes

<IMG id="img_icone" class="icone" title="icone pour modifier" src="images/crayon.png" alt="icone pour modifier" data-variable1="<?= $variable1 ?>" data-variable2="<?= $variable2 ?>" data-variable3="<?= $variable-3 ?>" />

document.getElementById('img_icone').addEventListener('click', (element) => {
    let variable1 = element.dataset.variable1
    let variable2 = element.dataset.variable2
    let variable3 = element.dataset.variable3

    // Et la tu fait ton truc
})

Après ce n'est pas trop intuitif, le plus simple serait d'utiliser StimulusJS avec ça tu peux utiliser des data-target et des data-values, ça a été créé par Ruby on Rails mais tu peut l'utiliser en tant que librairie, tu peux jeter un oeil à la doc https://stimulus.hotwired.dev

tom256
Auteur

Merci beaucoup pour cette réponse complète c'est exactement ce que je cherchais.
je me posais aussi la question, est ce que ce n'est pas plus lourd d'avoir 50 addeventlistener qui surveille s'il y a un click parmi les boutons édit, ou 50 onclick qui exécute une fonction quand on click parmi les boutons édit ?