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

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 ?

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 :
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 !