Afficher une image avec onclick

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:

---

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

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 ?

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é.

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

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

Merci

Citation:

---

Envoyé par 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.

---

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

Voici une solution :

Code:

---

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:

---

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).

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

Cdt
@+