Informatique

Quelqu un m'a dit c'est pas bien d'utiliser onclick etc dans les element html pq ?

En effet, il faut privilégier l'utilisation du DOM. Plutôt que d'utiliser onclick="laFonction()" tu utiliser en js document.querySelector("selecteurCSS").addEventListener("click", laFonction())

Le 13 juillet 2023 à 21:38:31 :
En effet, il faut privilégier l'utilisation du DOM. Plutôt que d'utiliser onclick="laFonction()" tu utiliser en js document.querySelector("selecteurCSS").addEventListener("click", laFonction())

C'est relou de faire comme ca

onclick fonctionne mais c'est une mauvaise pratique. Cela implique par exemple d'avoir du chargement de javascript bloquant en début de page, ce qui est aussi une mauvaise pratique. En effet, la fonction que tu passes dans le onclick doit être déclarée au moment ou l'utilisateur va cliquer hors tu ne peux pas t'en assurer sauf si le javascript est chargé en premier. Cependant, le chargement de ce code va bloquer l'affichage de ta page html pendant la période du chargement.

La bonne pratique est donc de gérer les événements avec une méthode similaire à celle proposée par MaSainteVerge.

Merci deepblue

En fait, c'est une pratique de feignasse qu'on attrape (je pense) après avoir appris des framewokrs. Car quand tu vas apprendre un framework comme ReactJS par ex tu verras que c'est comme ça tu appelleras tes fonctions dans ton JSX

<>
 <button onClick={() => taFonction(params)} className="button-save">
          Save
 </button>/>
</>

tu n'utiliseras plus les DOM.

Après pour répondre à la question "est ce que c'est une mauvaise pratique" sur Js de base, je vais faire confiance aux VDD, mais pour être honnête j'ai déjà testé d'appeler des fonctions comme ça directement dans le Template literals et j'ai pas eu de soucis, tous les éléments se mettaient à jour et sans erreurs, ni d'avertissements dans la console.

On peut pas appeler une fonction définie dans le document ready quand on est en dehors.
Et lors d'un ajax sur la page ben pour faire le add listener il va me dire qu'il trouve pas la fonction.
Que faire ?

Tu peux toujours export / import ton fichier javascript ou meme ta fonction.
Les fonctions c'est le même principe que quand tu déclares une variable si tu la déclares apres alors que tu appelles ta fonction ou variable avant, il va ta dire que ce n'est pas défini. Il faut pas oublier que javascript se lit de façon synchrone, c'est pour ça qu'on utilise axios/fetch (ou ajax mais je te conseille axios ou bien d'utiliser simplement fetch) pour récupérer des données de facon asyncrhone pour pas que ton code se bloque quand il fait un call api par ex.
Mais pour qu'on t'aide plus facilement partage nous ton repo ou encore met ton code dans un jsfiddle ou codepen.
Sans le code c'est pas évident d'aider.

Le 17 juillet 2023 à 15:08:49 :
On peut pas appeler une fonction définie dans le document ready quand on est en dehors.
Et lors d'un ajax sur la page ben pour faire le add listener il va me dire qu'il trouve pas la fonction.
Que faire ?

Je fais ca pour déclarer la fonction du coup
window.editRole = function(element) {

??? C'est quoi editRole, c'est quelque chose propre à ajax?
Mais même en faisant une recherche google je vois rien avec window.editRole.
Tu codes en javascript? en python(backend)?

le mieux c'est de partager ton code, comme je t'ai dit met tout ton code dans un jsfiddle et partage.
car là avec une seule ligne c'est pas trop explicite

Frigid, ce type de déclaration est sans doute une des pires choses à faire.

Le 17 juillet 2023 à 19:05:12 :
Frigid, ce type de déclaration est sans doute une des pires choses à faire.

Pourquoi ? Que faire alors ?

Le 17 juillet 2023 à 16:49:08 :
??? C'est quoi editRole, c'est quelque chose propre à ajax?
Mais même en faisant une recherche google je vois rien avec window.editRole.
Tu codes en javascript? en python(backend)?

Ben le nom d'une variable.

je vois pas en quoi ça serait une mauvaise chose, à part vouloir se faire chier à enregistrer l'event après coup dans le js (chose compréhensible dans certains scénario), souvent on utilise le onclick, l'event a été crée pour ça, par contre ça peut être merdique si tu met un onclick sur une div et un onclick sur un bouton dedans, si tu coupes pas l'event il se propagera à la div

Salut,

En fait, utiliser onclick dans les éléments HTML n'est pas top. Il vaut mieux utiliser le DOM et les écouteurs d'événements en JavaScript. C'est plus propre et ça évite des soucis de chargement. Si t'as besoin d'aide, partage ton code

Boucif, il me semble que onClick est purement un reliquat de la vieille époque d'Internet et du gros bordel lorsque les navigateurs se faisaient une guerre sans aucune forme de standardisation.
C'est d'ailleurs pour cela qu'il reste énormément de fonctionnalités avec le préfixe on qui font redite.

Désormais comme tu le dis il a une utilisation un peu détournée, mais en aucun cas a été crée pour ça.
Le problème avec les frameworks JS désormais, c'est qu'ils poussent les gens à faire ce genre de code sur du HTML "pur" même en production alors que c'est clairement désuet - et y a des nuances concernant le scoping du code appelé, mais j'ai peur de dire une bêtise.

edit : le DOM n'existait pas en tant que tel lorsque les premiers événements JS sont apparus, d'où le fait d'y attacher ce onEvent directement sur le HTML.

Le 20 juillet 2023 à 21:18:36 :
Boucif, il me semble que onClick est purement un reliquat de la vieille époque d'Internet et du gros bordel lorsque les navigateurs se faisaient une guerre sans aucune forme de standardisation.
C'est d'ailleurs pour cela qu'il reste énormément de fonctionnalités avec le préfixe on qui font redite.

Désormais comme tu le dis il a une utilisation un peu détournée, mais en aucun cas a été crée pour ça.
Le problème avec les frameworks JS désormais, c'est qu'ils poussent les gens à faire ce genre de code sur du HTML "pur" même en production alors que c'est clairement désuet - et y a des nuances concernant le scoping du code appelé, mais j'ai peur de dire une bêtise.

edit : le DOM n'existait pas en tant que tel lorsque les premiers événements JS sont apparus, d'où le fait d'y attacher ce onEvent directement sur le HTML.

Tu conseil de faire quoi ?

Le 21 août 2023 à 01:06:57 :

Le 20 juillet 2023 à 21:18:36 :
Boucif, il me semble que onClick est purement un reliquat de la vieille époque d'Internet et du gros bordel lorsque les navigateurs se faisaient une guerre sans aucune forme de standardisation.
C'est d'ailleurs pour cela qu'il reste énormément de fonctionnalités avec le préfixe on qui font redite.

Désormais comme tu le dis il a une utilisation un peu détournée, mais en aucun cas a été crée pour ça.
Le problème avec les frameworks JS désormais, c'est qu'ils poussent les gens à faire ce genre de code sur du HTML "pur" même en production alors que c'est clairement désuet - et y a des nuances concernant le scoping du code appelé, mais j'ai peur de dire une bêtise.

edit : le DOM n'existait pas en tant que tel lorsque les premiers événements JS sont apparus, d'où le fait d'y attacher ce onEvent directement sur le HTML.

Tu conseil de faire quoi ?

Ca dépend si tu fais du vanilla JS ou si tu utilises un framework comme React.

En vanilla JS, tu dois utiliser les event listener càd la méthode "addEventListener" https://www.w3schools.com/jsref/met_element_addeventlistener.asp

Si tu utilises un framework, alors tu dois te référer à la doc de celui-ci car chacun a sa manière de faire.

En fait c'est pas standard même pour maintenir ton code et debugger sur le long terme. En entreprise tu ferais jamais ça. Je parle bien de JS vanilla.

L’idée serait de charger ton js genre app.js

Ce même fichier pourrait importer des modules js, tu fais un query selector, si il est pas vide tu lance la fonction à l'evenement voulu. En terme de performance et de lisibilité ça marche pas mal.