JavaScript Doubler un contenu

Résolu/Fermé
MarieMizuki - 28 nov. 2011 à 16:35
 MarieMizuki - 29 nov. 2011 à 15:40
Bonjour, je souhaiterais qu'au clic sur un mot celui-ci apparaisse en double, comme ici => http://www.commentcamarche.net/forum/affich-12414566-changer-un-texte-au-clic-en-javascript
mais pas un nouveaux texte en cache mais le même élément en double.

Exemple j'écris Marie quand je clique sur ce prénom il est afficher MarieMarie.

Tout ça en sachant que les noms qui devront apparaitre en double sont dans une base de donnée (easyphp). Je vous montre toute mes pages:



connexion.php :

<?php
$hote = 'localhost';
$base = 'animalerie';
$user = 'root';
$pass = '';
$db = mysql_connect ($hote, $user, $pass) or die (mysql_error ());
$ret = mysql_select_db ($base, $db) or die ('Echec lors de la connexion: '.mysql_error ());
?>



Qui est dans :


interrogation.php :

<?php
include 'connexion.php';

$sql = 'SELECT * FROM animal';


$req = mysql_query($sql) or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());


echo '<table>';

while($data = mysql_fetch_assoc($req))
    {

    ?> <tr><td> <?php
	echo $data['nom'];
	echo '</td> <td>';
	echo $data['espece'];
	echo '</td> <td>';
	echo $data['maitre'];
	echo '</td></tr>';
    }
	
echo '</table>';


mysql_close();
?>



Qui est dans :


page.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
   <title>Animalerie</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" href="essai.css" />
   </head>
 
   <body>
      <center><h2>Mes animaux</h2>

                <?php
include 'nav.php';
?>

            <section>
             
                    <?php
include 'interrogation.php';
?>
				
            </section>
       
</center>
   </body>
</html>


En gros je chercher comment dire, "quand je clique sur ce mot, fais le mot apparaitre en double" !

Merci d'avance ^^

PS: Je sais que ma page est un peu bizarre et mal organiser mais je fais des tests, n'y faite pas attention, merci.

4 réponses

Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
28 nov. 2011 à 16:44
Hello,

Commence par ajouter dans ton body le script suivant :

<script type="text/javascript">
   function doublerMot(element){
      var motSimple = element.innerHTML;
      element.innerHTML = motSimple+motSimple;
   }
</script>


Ensuite il faut faire une méthode PHP qui s'assure, par exemple via un preg_replace() que chaque mot de ta liste est remplacé par :

<span onClick="doublerMot(this);">mot</span>

Par exemple, si tes mots à doubler sont dans le tableau $tMots :

<?php
   for ($i=0 ; $i<count($tMots) ; $i++){
      preg_replace("#".$tMots[$i]."#", "<span onClick=\"doublerMot(this);\">".$tMots[$i]."</span>", $tonTexte);
?>

1
Mihawk Messages postés 4313 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 845
29 nov. 2011 à 13:47
Et bien il faut que le texte contenant les mots à doubler soit gérer par une variable PHP, sur laquelle tu appliques le code PHP que je t'ai fourni !
1
MarieMizuki
29 nov. 2011 à 10:16
Bonjour,

merci pour la réponse mais je ne voit pas comment utiliser:

<?php
   for ($i=0 ; $i<count($tMots) ; $i++){
      preg_replace("#".$tMots[$i]."#", "<span onClick=\"doublerMot(this);\">".$tMots[$i]."</span>", $tonTexte);
?>


Il faut que je remplace des éléments, il me semble, lesquels et par quoi ?

De plus j'ai essayer :

<span onClick="doublerMot(this);">mot</span>


Ca fonctionne mais je voudrais limiter le "doublage" à une fois.
0
MarieMizuki
29 nov. 2011 à 15:40
J'ai réussi, je n'avais pas besoin du code php au final ^^

Merci pour ton aide ^^
Bonne journée.
0