Discussion :

[spawns]

Bonjour a tous,
je suis novice en JS et j'essaie de faire afficher une icone sur l’événement onclick
jai un champ de formulaire qui si rempli quand je clic sur une icone mais je voudrais également que cette icone s'affiche après le champs

Code :

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

1
2
3
 
<input type="text" name="icon" value="" size="50" id="monicon"/><br />
<a href="#monicon" onclick='document.getElementById("monicon").value = "<span class=\"icon-paperclip\"> </span>" ' class="buttonsicon "><span class="icon-paperclip"> </span></a>

Comment faire pour réaliser cette opération ?

Merci d'avance de votre aide
Cdt

[Auteur]

bonjour,

tes balises <a> ne contiennent aucun texte, difficile d'y cliquer dessus pour exécuter le code. Ensuite, document.getElementById("monicon").value = "<span class=\"icon-paperclip\"> </span>" demande d'écrire "<span class=\"icon-paperclip\" dans un input texte. Il n'y aucune image.

Que veux-tu faire exactement ?

[spawns]

la balises ne contient pas de texte, car elle contient une class CSS "class="buttonsicon "><span class="icon-paperclip"> </span>" qui permet d'afficher un bouton avec une icone dedans, donc on peut bien cliquer dessus.
cela fonctionne très bien.
je voudrais simplement que lorsque l'on clic sur ce bouton, cela remplisse le input, cela marche aussi,
mais surtout que cela
affiche après le input le bouton/icone sur lequel on a cliqué.

[sekaijin]

le plus simple est de mettre un div vide après ton input
de définir une classe css qui affiche l'icône
et lors du click associer la classe au div.

A+JYT

[spawns]

j'ai pensé a ça par contre comment faire exactement
un petit bout code serait le bienvenue si possible

Merci

[Auteur]

la balises ne contient pas de texte, car elle contient une class CSS "class="buttonsicon "><span class="icon-paperclip"> </span>" qui permet d'afficher un bouton avec une icone dedans, donc on peut bien cliquer dessus.
cela fonctionne très bien.

ok j'ignorais que la classe prenait en compte l'image.

Voici une solution :

Code html :

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

1
2
3
4
5
6
7
8
 
<input type="text" name="icon" value="" size="50" id="monicon"/><br />
 
<a href="#monicon" onclick="setIcon(this)" class="buttonsicon ">
	<span class="icon-paperclip"> </span>
</a>
 
<div id="idDivDest" style="display:none"></div>

Code javascript :

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
 
function setIcon (objSrc)
{
	// Lecture du contenu de la balise <a>
	var inputTxt = objSrc.innerHTML;			
 
	// Récupération du nom de l'ancre
	var idx = objSrc.href.lastIndexOf("#");		
	var idInputDest = objSrc.href.substring(idx+1);	
 
	// Contenu de la balise <a> écrit dans l'input
	document.getElementById(idInputDest).value = inputTxt;
 
	// Affichage du div
	document.getElementById("idDivDest").style.display = "block";
 
	// Modification de la classe du div
	document.getElementById("idDivDest").className = objSrc.getElementsByTagName("span")[0].className;
 
}

J'ai décrit le code JS. Le contenu de l'input et du div dépendent de ce qu'il y a dans la balise <a> et de ses paramètres (href, span, class).

[spawns]

Cool,
ça marche nikel tu es au top Auteur.
Grand merci à toi

Cdt
@+