Discussion :

[RDM_dev]

Bonjour ! Je fais un site pour une association, et pour ce site je souhaitais créer des boutons de raccourcis afin d'ajouter un certain bout de texte dans un textarea. J'ai cherché un peu et j'ai donc fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var txt= document.getElementById('chdeux');
 
var r1 = document.getElementById('raccun');
var r2 = document.getElementById('raccdeux');
 
var Abtn = document.getElementById('Abtn');
var Bbtn = document.getElementById('Bbtn');
 
Abtn.onclick = function() {
    txt.value += r1.value;
    return;
};
 
Bbtn.onclick = function() {
    txt.value += r2.value;
    return;
};

Et j'ai donc ça dans mon HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="add.php" method="post" autocomplete="off">
    <h3>Champ 1</h3>
    <input type="text" name="a" placeholder="Champ 1" size="50"/>
    <br/>
 
    <h3>Contenu</h3>
    <textarea rows="20" cols="100" placeholder="Champ 2" name="b" id="chdeux"></textarea>
    <br/>
 
    <input id="raccun" type="text" name="Abtn" placeholder="raccun" size="50"/>
    <button id="Abtn" type="button"></button>
    <br/>
 
    <input id="raccdeux" type="text" name="raccdeux" placeholder="raccdeux" size="50"/>
    <button id="Bbtn" type="button"></button>
    <br/>
 
    <input type="submit" value="Envoyer"/>
</form>

Je sais pas si j'ai un problème avec mon script, faut dire que j'ai jamais touché à JS avant ça, mais ce qui est sûr c'est qu'il ne s'exécute pas du tout... Du moins maintenant il ne s'exécute pas ! Il y a à peu près une heure ça "fonctionnait", mais pas au bon endroit (il ajoutait bien le texte des entrées raccun et raccdeux dans la textarea, sauf qu'il remplaçait aussi la totalité du contenu du champ 1 par le contenu de raccdeux...), et pour réussir à faire en sorte que ça fonctionne j'ai fait un truc tout simple : j'ai attendu 30 minutes (véridique, j'ai pas touché ni au site, ni au code pendant plus de 30 minutes et ça s'est mis à fonctionner alors que ça ne fonctionnait pas)...

Je suis complètement largué, est-ce que quelqu'un pourrait m'aider ? Je vous donne aussi les specs du serveur que j'utilise, si ça peut être utile : EasyPHP-DevServer 17.0, Apache 2.4.25 x86 - PHP 5.6.30 x86, MySQL 5.7.17 x86 et phpMyAdmin 4.7.0.

Merci d'avance pour votre aide !

[ProgElecT]

Salut

Regardes bien ton code, car:
var Abtn = document.getElementById('Abtn'); pour récupérer l'objet suivant son id
var Abtn = document.getElementsByName('Abtn'); pour récupérer l'objet suivant son name

[RDM_dev]

Merci pour l'info, mais je vois pas trop le rapport avec mon problème ^^'

[ProgElecT]

Re

En effet, je n'avais pas vue que tu avais des ids et names qui portaient le même nom.
A essayer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var txt= document.getElementById('chdeux');
 
var r1 = document.getElementById('raccun');
var r2 = document.getElementById('raccdeux');
 
//var Abtn = document.getElementById('Abtn');
//var Bbtn = document.getElementById('Bbtn');
 
/* Abtn.onclick = function() {
    txt.value += r1.value;
    return;
}; */
document.getElementById('Abtn').addEventListener("click",function() {
    txt.value += r1.value;
    return;
});
 
/* Bbtn.onclick = function() {
    txt.value += r2.value;
    return;
}; */
document.getElementById('Bbtn').addEventListener("click",function() {
    txt.value += r2.value;
    return;
});

A quel endroit du code HTML est inclut la partie script ?

[darkstar123456]

Bonjour,

C'est bizarre, quand je teste le code, tout fonctionne parfaitement : https://codepen.io/DarkStar123456/pe...q?editors=0011

Avez-vous regardé la console ? Y a-t-il des erreurs ? Si oui, montrez-les nous qu'on puisse y voir plus clair

Sinon, plutôt que d'utiliser getElementById(), il existe maintenant document.querySelector() et document.querySelectorAll()
Ils ont l'avantage de voir facilement ce qu'on veut sélectionner :-) (et on n'est plus limité aux IDs)

Finalement, quitte à commencer un développement, vous ne devriez pas utiliser PHP5.6 qui est obsolète. Préférez PHP 8.1

[RDM_dev]

Tout d'abord, pour répondre à ProgElecT, malgré ton bout de code ça ne fonctionne toujours pas... Quant à mon script, j'ai tenté de le mettre dans la balise head et à la toute fin du doc HTML (avant la fermeture de la balise body, j'avais vu ça sur StackOverflow) mais aucun n'a fonctionné, donc actuellement il est dans la balise head.

Pour répondre à darkstar, j'avais pas regardé la console non, je n'y avais pas pensé, donc merci du conseil ! Je viens de regarder et j'ai effectivement une erreur, la voici :

Uncaught TypeError: Cannot set properties of null (setting 'onclick')
at add_buttons.js:17:16

J'ai la même erreur avec le addEventListener. Donc je devine qu'il arrive pas à récupérer les boutons, ce qui explique pourquoi ça ne fonctionne pas, c'est déjà un pas en avant ! Mais par contre j'ai aucune idée du comment réparer ce problème :p
Et si j'utilise PHP5.6 et pas PHP8.1 c'est parce que c'était la version par défaut installée avec EasyPHP, et vu comment j'ai cafouillé pour mettre en place le serveur j'avais pas la foi de chercher pour mettre PHP8.1, surtout que je suis assez tenu par le temps... Je regarderai pour mettre à jour le serveur dès que j'ai fini le projet, même si je sais pas si j'aurais le temps d'adapter le site pour PHP8.1 au moins ça sera fait pour mes prochains projets !

[darkstar123456]

Hello,

Effectivement, c'est important de regarder la console en JS car c'est là que sont affichées les erreurs et s'il y a une erreur, plus rien ne fonctionnera par la suite

Pour ce qui est de ce(s) problème(s), il faudrait qu'on puisse voir le code (ici l'erreur affichée est à la colonne 16 de la ligne 17)
En tout cas, il ne semble pas avoir réussi à sélectionner le bouton. Avez-vous écrit un mauvais sélecteur ?

Ne serait-il pas possible de faire un copier/coller de l'HTML/CSS et le mettre dans codepen ? ^^
Car vu que c'est en local, on ne pourra pas y avoir accès autrement et donc ça serait l'idéal comme ça on pourrait avoir le rendu du code (au lieu des sources uniquement)

[RDM_dev]

Bah je viens de régler le problème finalement, c'était la position du script dans mon html, je l'ai déplacé à la fin du form et ça a fonctionné nickel ! J'avais juste pas la logique du script, faut dire que c'est la première fois que j'en fais :p Mais je note codepen pour la prochaine fois si j'ai de nouveau un problème !

[darkstar123456]

Bonjour,

Du coup, j'aimerais expliquer pourquoi ça ne fonctionne pas.

Si vous exécutez une document.getElementById() (ou n'importe quelle fonction pour récupérer un élément du dom), il faut attendre que le dom soit prêt
Il est donc possible de mettre du JS dans les balises <head></head> mais de toute façon, il est conseillé de toujours mettre son code en bas du site (juste avant la fermeture de </body>)
Ca évite le problème rencontré, et ça permet d'éviter également que tout le site soit inaccessible s'il y a une grosse erreur JS

[RDM_dev]

D'accord, je comprends mieux ! Merci énormément pour l'aide !