générer des DIV à partir d'une valeur texte Résolu/Fermé

Question

Bonjour, Je souhaite générer des div à partir d'une valeur texte récupérée d'un input text. Exemple, j'écris dans mon input "test", cela me créé en html quelque chose de cette ordre là :

T

E

S

T

L'objectif final est de pouvoir proposer au visiteur d'écrire un texte (via input) qui sera réinterprété en image (1 image = 1 lettre) dans une div prévue spécialement à cet effet. J'arrive actuellement à récupérer ce que l'utilisateur rédige, à l'affiche, à décomposer ce message lettre par lettre pour pouvoir les manipuler, mais je bloque à ce niveau : je souhaite remplacer ces lettres par des

,

... J'ai l'impression que je ne peux pas mettre autant d'html que je le voudrai avec le replace ? On m'a parlé de boucle également ? Voici mon code.

En exemple je peux vous citer ce site : http://www.google-type.com/ à la différence que ce site va carrément chercher des images dans google image, pour ma part tout doit être directement sur mon serveur. Je profite de mon premier message pour féliciter cette communauté qui m'a apporté beaucoup de solutions dans de nombreux domaines, mais aujourd'hui, le formulaire de recherche ne suffit plus. Merci à vous. Olivier

Alain_42 · Answer

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript"> 
function showMsg(){ 
var userInput = document.getElementById('userInput').value; 
var userArray=userInput.split(""); //c'est un array
//boucle sur l'array
var sortie="";
for (i=0;i< userArray.length;i++){
	sortie += '<div class="'+userArray[i].toLowerCase()+'">'+userArray[i]+'</div>';
	//toLowerCase convertit la mettre en minuscule
}
document.getElementById('userMsg').innerHTML = sortie; 
} 
</script> 
</head> 
<body> 
<p id="userMsg"></p> 
<input type="input" maxlength="40" id="userInput" onClick="this.value='';" onkeyup="showMsg()" value="ecrivez ici" /> 
</body> 
</html>

DarkAurora · Answer

tu définies un contain avec un id tell que : ID_Contain et a chaque fois que tu souhaite ajouter une div tu peux faire => $('ID_Contain').append('

ton image

');

Générer des DIV à partir d'une valeur texte

2 réponses

Discussions similaires