[Résolu] Lancer une fonction javascript sur un clic dans une balise &l

Bonjour,
Je ne maîtrise pas du tout l'imbrication de javascript dans du html, et j'aurais aimé savoir comment, dans ce bout d'html, je pouvais lancer la fonction javascript editer_sous_menu(menu[0],0) sur un clic dans la balise <td>

<td width="154" height="38" align="left" bgcolor="#FFFFFF" onMouseOver=this.style.background="#FFFFFF" editer_sous_menu(menu[0],0) 
onMouseOut=this.style.background="#FFFFFF">
<a align="left"  onMouseOver="editer_sous_menu(menu[0],0)" href=# class=ejsmenu>
<font style=font-size:1em FACE="Arial"">L'Association</font>
</a>
</td>

Merci
Cordialement
Zakuli
Modifié par Zakuli (16 Feb 2021 - 23:49)

Salut!
Je trouve personnellement que ton code est trop mélangé, tu devrais séparer ton html, css et javascript. Ca permet une bien meilleure lisibilité. Comme ça par exemple :

<td id="title-container">
<a href="#" id="title-link">
<h1 id="title">L'Association</h1>
</a>
</td>

#title-container {
width: 154px;
height: 38px;
align: left;
background-color: white;
}
#title {
font-size: 1em;
font-family: Arial;
}

function editer_sous_menu() {
// le code de ta fonction
}

const td = document.getElementById('title-container');
const a = document.getElementById('title-link');

td.onclick = editer_sous_menu;
a.onclick = editer_sous_menu;

td.addEventListener('mouseover', () => {
this.style.background= "white";
}

Je te déconseille de copier mon code, ça fait longtemps que je n'ai pas fait de front et ça doit être très peu propre (:
( j'ai répondu à ta question dans le code )
Bonne nuit !
Modifié par vzytoi (17 Feb 2021 - 00:43)

merci vzytoi,
Tu as raison mon code est trop mélangé.
En dehors de cela, peux me dire comment faire pour lancer la fonction javascript editer_sous_menu(menu[0],0) sur un clic dans la balise <td> ?
Merci de ta réponse
Cordialement

Bonjour,
Si veux bien laissé pas mélangé, tu peux faire :

var td = document.getElementById('title-container');
td.onclick = editer_sous_menu(menu[0],0);

Sinon, dans ton HTML, comme tu fais tes onMouseOver, tu fais des onClick...

(vzytoi a répondu à ta question dans son code)
Voilà !
Modifié par js_html (17 Feb 2021 - 16:27)

Merci Js,
Comme j'ai sous html un <td> ...</td>, si je le transforme en
<td onclick=editer_sous_menu(menu[0],0)> ... </td>
ça marchera ?

Eh bien essaie !
Il manque les guillemets et je crois qu'il faut ajouter "javascript:"
Mais il me semble qu'il faut mettre :

 <td onclick="javascript:editer_sous_menu(menu[0],0)"> ... </td>

Bonjour,

Je dois dire, js_html, que tu as fait assez fort en quelques lignes.

js_html a écrit :
Si veux bien laissé pas mélangé, tu peux faire :

var td = document.getElementById('title-container');
td.onclick = editer_sous_menu(menu[0],0);

Non, ça ne marche pas (si tu fais comme ça, tu auras dans td.onclick le résultat de editer_sous_menu(menu[0],0) et non pas le code editer_sous_menu(menu[0],0).

Eventuellement, tu aurais pu conseiller :

var td = document.getElementById('title-container');
td.onclick = function(){editer_sous_menu(menu[0],0);};

ou bien (le plus académique) :

var td = document.getElementById('title-container');
td.addEventListener("click",function(){editer_sous_menu(menu[0],0);});

js_html a écrit :
Il manque les guillemets

Ils sont facultatifs (mais c'est en effet conseillé d'en mettre).

js_html a écrit :
je crois qu'il faut ajouter "javascript:"

A priori, non, pas ici (vraiment pas de bol, même si ça semble marcher quand même; en général, on l'utilise plutôt pour les attributs href).

Zakuli a écrit :
Comme j'ai sous html un <td> ...</td>, si je le transforme en
<td onclick=editer_sous_menu(menu[0],0)> ... </td>
ça marchera ?

Ça peut marcher (si menu[0] a été correctement initialisé, et au bon moment, mais pour le savoir, il faudrait qu'on ait une vue plus large de ce que tu fais).

Amicalement,
Modifié par parsimonhi (17 Feb 2021 - 21:19)

Ok parsimnhi, mais je souhaite me défendre :
- le script que j'ai donné est celui écrit deux messages plus haut par vzytoi !
- si on fait var x=y(), ça ne lance pas la fonction ? Ça fait comment alors, pour retourner la fonction ?
- et si l'on fait ça dans l'HTML, ça fonctionne ? Car c'est ce qu'il avait fait avant...
- oui, personnellement, j'utilise le dernier code que tu as écrit !
- pour les guillemets, je pense que presque tout le monde en mets autour des attributs : c'est beaucoup plus clair (et évite les problèmes si espaces) !

Donc finalement, tu dis que je fais n'importe quoi, mais j'ai juste oublié function(){}, car les guillemets, c'est mieux avec, et le "javascript:", ça fonctionne avec...

Bonjour,

js_html a écrit :
Ok parsimonhi, mais je souhaite me défendre...

Alors, voilà mon conseil  :
1) tu prends une feuille de papier
2) tu écris dessus : "je testerai toujours mes solutions avant de les poster"
3) tu affiches la feuille sur ton écran !

Ne te méprends pas. Je vois bien que tu es passionné et que tu finiras par être bon.

js_html a écrit :

- le script que j'ai donné est celui écrit deux messages plus haut par vzytoi !

Non, et du coup, je suis obligé d'insister. Vraiment désolé.

Vzytoi a proposé une solution du type (qui marche si la fonction n'a pas de paramètres) :

td.onclick = editer_sous_menu;

Tu as proposé une solution du type :

td.onclick = editer_sous_menu();

C'est très différent du fait des parenthèses. Dans le 1er cas, on met dans td.onclick le code de editer_sous_menu, et le code editer_sous_menu() sera exécuté plus tard lors d'un clic sur le td. Dans le 2e cas, on exécute immédiatement editer_sous_menu() et on met dans td.onclick le résultat de cette exécution, qui est probablement ici "undefined". Ça ne fonctionne pas, tout simplement, car quand tu cliqueras ensuite sur le td, il n'y aura aucun code à exécuter.

Note: quand il y a des paramètres, c'est sensiblement plus compliqué. Ça dépend de ce qu'on veut vraiment faire. Il faut faire très attention. C'est pour ça qu'on n'a pas l'assurance que le code de Zakuli marche sans savoir dans le détail ce qu'il y a dans la page, et quel est le but de cette fonction.

js_html a écrit :

- si on fait var x=y(), ça ne lance pas la fonction ? Ça fait comment alors, pour retourner la fonction ?

Ça exécute y() immédiatement et range ce que y() retourne dans la variable x (si la fonction y a une instruction return dans son code, sinon, ça renvoie "undefined"). Ça ne retourne pas (le code de) la fonction y. Apparemment, tu as du mal à saisir la différence.

js_html a écrit :

- et si l'on fait ça dans l'HTML, ça fonctionne ? Car c'est ce qu'il avait fait avant...

Relis les explications plus hauts. Fais des tests.

js_html a écrit :

- pour les guillemets, je pense que presque tout le monde en mets autour des attributs : c'est beaucoup plus clair (et évite les problèmes si espaces) !

Ça, ça aurait été bien de l'écrire.

js_html a écrit :
Donc finalement, tu dis que je fais n'importe quoi, mais j'ai juste oublié function(){}, car les guillemets, c'est mieux avec, et le "javascript:", ça fonctionne avec...

Mouais !

Amicalement,

Merci beaucoup à tous les deux, désolé, je n'arrive pas à votre cheville, et je vois que j'ai beaucoup à apprendre dans le domaine !

Ok parsimonhi !

parsimonhi a écrit :
Je vois bien que tu es passionné et que tu finiras par être bon

D'abord, merci (Dans les deux sens du terme : que je pourrais être bon plus tard ; et que je suis nul maintenant !) !!

Ensuite, ton truc avec les feuilles, c'est drôle une fois, après ça devient lourd...

parsimonhi a écrit :
je testerai toujours mes solutions avant de les poster

C'est ce que je fais d'habitude, mais là, j'étais sur téléphone alors... C'est pas très pratique... Le fill ça fonctionne pas, mon serveur je n'y ai pas accès et jsfiddle est tout tout petit...

D'accord, je comprends l'histoire des parenthèses (même si pour moi, une fonction a toujours des parenthèses, mais bon...) mais dans td.onclick=editer_sous_menu(); JS n'est pas assez intelligent pour voir que td.onclick n'est pas une variable ?

parsimonhi a écrit :
Vzytoi a proposé une solution du type (qui marche si la fonction n'a pas de paramètres)

Mais ce n'était pas le cas ici...

parsimonhi a écrit :
Si on fait var x=y(), ça ne lance pas la fonction ? Ça fait comment alors, pour retourner la fonction ?

Ça exécute y() immédiatement et range ce que y() retourne dans la variable x (si la fonction y a une instruction return dans son code, sinon, ça renvoie "undefined"). Ça ne retourne pas (le code de) la fonction y. Apparemment, tu as du mal à saisir la différence.

Oui, j'ai du mal avec ça... Mais pourtant, ça l'exécute la fonction, regarde ça par exemple, et la question était bien d'exécuter la fonction ("Lancer une fonction javascript [...]"), même si là ça ne fonctionne pas à cause du .onclick (C'est bien pour ça que ça ne fonctionne pas ?)

Je ne comprends pas pourquoi

<a onclick="y()" id="lien"></a>

est différent de

document.getElementById("lien").onclick=y()

, mais bon... C'est parce que, pour le second, JS prends "document.getElementById("lien").onclick" pour une variable ??

J'aurais peut-être dû faire un nouveau sujet, non ??

Merci !

Bonjour,

js_html a écrit :
C'est ce que je fais d'habitude, mais là, j'étais sur téléphone alors...

... dans ce cas, tu s'abstiens.

C'est vraiment galère à corriger ensuite. La preuve, c'est qu'on en est à je ne sais pas combien de posts pour rattraper le coup, et en plus, tu n'as toujours pas compris comment ça marchait.

js_html a écrit :
JS n'est pas assez intelligent pour voir que td.onclick n'est pas une variable ?

1) y et y() sont tous les deux possibles, mais signifient 2 choses différentes en js. Javascript ne peut pas deviner tes intentions.

2) "undefined" est une valeur possible pour td.onclick même si c'est une méthode. Et c'est justement ce que renvoie y() quand elle n'a pas d'instruction return.

3) y() pourrait renvoyer le code d'une fonction. Ça n'aurait pas trop de sens de faire comme ça ici, et c'est rare qu'on ait besoin de le faire, mais c'est possible syntaxiquement.

Il n'est même pas clair que javascript puisse émettre une erreur à l'exécution dans ce type de cas.

js_html a écrit :
(À propos du fait que la fonction a ou pas des paramètres) Mais ce n'était pas le cas ici...

En effet. Mais ça pouvait marcher quand même avec par exemple l'emploi de variables globales initialisées de manière appropriée.

js_html a écrit :
Mais pourtant, ça l'exécute la fonction, regarde ça par exemple, et la question était bien d'exécuter la fonction ("Lancer une fonction javascript [...]"), même si là ça ne fonctionne pas à cause du .onclick (C'est bien pour ça que ça ne fonctionne pas ?)

1) le code du jsfiddle que tu indiques en lien est du gros n'importe quoi. Après son exécution, X reçoit la valeur "undefined" car displayNone() ne renvoie rien. Ça m'étonnerait que ce soit un effet voulu. Si on fait abstraction de ça, oui, la fonction s'exécute car elle est dans une partie de la page où le navigateur est censé exécuter du javascript justement.

2) justement non, la question n'était pas d'exécuter la fonction au moment de son affectation à td.onclick, mais de la faire exécuter plus tard lors d'un clic. C'est complètement différent.

js_html a écrit :

Je ne comprends pas pourquoi

<a onclick="y()" id="lien"></a>

est différent de

document.getElementById("lien").onclick=y()

, mais bon... C'est parce que, pour le second, JS prends "document.getElementById("lien").onclick" pour une variable ??

1) Dans le 1er cas, y() est la valeur d'un attribut html et l'affectation se fait dans une partie de la page où c'est du code html, pas du code js, et donc ici le navigateur n'exécute pas immédiatement le js. C'est ainsi que fonctionne le html. Le "=" est du html.

2) Dans le 2e cas, y() est dans dans une partie de la page où le navigateur est en train d'exécuter du code js. La fonction s'exécute immédiatement. C'est ainsi que fonctionne js. Le "=" est du js.

Amicalement,

parsimoni a écrit :
C'est vraiment galère à corriger ensuite. La preuve, c'est qu'on en est à je ne sais pas combien de posts pour rattraper le coup, et en plus, tu n'as toujours pas compris comment ça marchait.

Donc, c'est peut-être mieux : ça permet de m'expliquer...

D'accord, merci pour les autres explications !