Utiliser plusieur fois le même script JS dans la même page

mont_dani Messages postés 249 Statut Membre -  
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

J'envoi les messages de mes contacts, que je garde dans un fichier TEXT après POST

Je récupère avec du PHP.

Pour réduire ou agrandir les messages, j'utilise un script JS.

Mon problème est que je ne peut pas utiliser ce script plusieur fois.

Voic le script. 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="jquery.mlens-1.2.min.js"></script>
		 <!-- LIENS VERS LES JS dans le dossier /js -->
    <script src="js/jquery-1.10.2.min.js" type="text/javascript">
</script>
    <script src="js/lightbox-2.6.min.js" type="text/javascript">
</script>
        <link rel="stylesheet" href="../../css/menu.css">
		<link rel="stylesheet" href="../../css/general.css">
		<link rel="stylesheet" href="../../css/libro.css">
		<link rel="stylesheet" href="../../css/zoom_photo.css">
		 <link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    function affichManipul(){
        if(document.getElementById('a_manipuler').style.display == "none") {
            document.getElementById('a_manipuler').style.display = "block";
			document.getElementById('texte_court').style.display = "none";
            document.getElementById('toaffich').innerHTML = "Volver";
        } else {
            document.getElementById('a_manipuler').style.display = "none";
			document.getElementById('texte_court').style.display = "block";
            document.getElementById('toaffich').innerHTML = "Leer más";
        }
    }
</script>
</head>
	<body>
	
		
	<?php
	//recupration texte et datos du POST
	$pseudo = "Daniel";
	$date ="22/10/2021";
	$texte_id = $pseudo."".$date;
	$texte =("La fleur de lys (⚜) est un meuble héraldique. C'est l'une des quatre figures les plus populaires avec les multiples croix, l'aigle et le lion. Elle est habituellement classée parmi les figures naturelles. La fleur de lys ne représente pas le lys (Lilium sp.) que l'on trouve dans les jardins (utilisé plus rarement en héraldique sous le nom de lys de jardin). Certains auteurs comme Charles Bruneau y voient plutôt une représentation stylisée de l'iris des marais.Du fait de sa valeur dans la tradition chrétienne, la fleur de lys était symboliquement très présente sous la forme d'aigrette trifide, dans l'Empire byzantin puis dans les royaumes francs et le royaume lombard. Ce symbole fut utilisé par les souverains carolingiens puis par leurs successeurs, empereurs ottoniens et rois capétiens.");
	//comptage nombre caractere du texte
	$nb_car = strlen($texte);
	//teste selon nombre caractere
	if ($nb_car < 200){
		$texte_court = $texte;}
	else{
		$nb_car_court =(200); // nombre caractere sup a 200
		$diff = $nb_car_court - $nb_car; // caractere a supprimer
		$texte_court = substr($texte, 0, $diff);} //partie du texte a afficher
	?>
	affichege premier texte <br>
	<p id="texte_court">  <?php echo $texte_court;?></p>
	<div id="a_manipuler" style="display: none">  <?php echo $texte;?><br /></div>
	<button id="toaffich" onclick="affichManipul()">Leer más</button><br>
	Affichege deuxieme texte<br>
	<p id="texte_court">  <?php echo $texte_court;?></p>
	<div id="a_manipuler" style="display: none"><?php echo $texte;?><br /></div>
	<button id="toaffich" onclick="affichManipul()">Leer más</button>
		

</body>
</html>

Le premier texte s'affiche très bien, mais le second non.

Auriez-vous une idée???

Merci para avance
Configuration: Windows / Chrome 96.0.4664.45

5 réponses

Réponse 1 / 5
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759
 
Bonjour,

Ton problème, c'est que tu cibles des ID hors.. un ID ( comprendre IDENTIFIANT) se doit d'être UNIQUE
A la place, il faudrait modifier le code pour utiliser des CLASS ou mettre des ID différents à chacun de tes éléments et adapter le code pour qu'il cible le bon élément en fonction de là où tu as cliqué...
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759
 
par exemple 
    
    affichege premier texte <br>
	<p id="texte_court1">  <?php echo $texte_court;?></p>
	<div id="a_manipuler1" style="display: none">  <?php echo $texte;?><br /></div>
	<button id="toaffich1" onclick="affichManipul(1)">Leer más</button><br>
	Affichege deuxieme texte<br>
	<p id="texte_court2">  <?php echo $texte_court;?></p>
	<div id="a_manipuler2" style="display: none"><?php echo $texte;?><br /></div>
	<button id="toaffich2" onclick="affichManipul(2)">Leer más</button>



function affichManipul(num){
  if(document.getElementById('a_manipuler'+num).style.display == "none") {
    document.getElementById('a_manipuler'+num).style.display = "block";
    document.getElementById('texte_court'+num).style.display = "none";
    document.getElementById('toaffich'+num).innerHTML = "Volver";
  } else {
    document.getElementById('a_manipuler'+num).style.display = "none";
    document.getElementById('texte_court'+num).style.display = "block";
    document.getElementById('toaffich'+num).innerHTML = "Leer más";
  }
}
0
mont_dani Messages postés 249 Statut Membre > jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention  
 
C'est très bien. Serait-il possible de remplacer num et le numero par une chaine de caracteres qui serait une variable php $time (date/heure/minute/seconde
Quelque chose comme ca:
affichege premier texte <br>
<p id="texte_court$time"> <?php echo $texte_court;?></p>
<div id="a_manipuler$time" style="display: none"> <?php echo $texte;?><br /></div>
<button id="toaffich$time" onclick="affichManipul($time)">Leer más</button><br></code> 
function affichManipul(chaine_caratere){
  if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "block";
    document.getElementById('texte_court'+chaine_caratere).style.display = "none";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "Volver";
  } else {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "none";
    document.getElementById('texte_court'+chaine_caratere).style.display = "block";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "Leer más";
  }
}
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759 > mont_dani Messages postés 249 Statut Membre
 
Bien sûr
0
mont_dani Messages postés 249 Statut Membre > jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention  
 
Supeeeeeer. C est parfait. Merci pour ton aide
0
Réponse 2 / 5
mont_dani Messages postés 249 Statut Membre
 
Oui je suis complètement d'acoord avec toi.

J'ai essayer en mettant des ID diffèrent mais je ne sais pas comment faire avec le JS pour qu'il reconnaisse el ID de chaque message.

Aurais tu une idée?
0
Réponse 3 / 5
mont_dani Messages postés 249 Statut Membre
 
Bonjour Jordane.

Je reviens vers toi pour ce problème -.

Je viens de passer de local a seveur et j'ai cette erreur dans la console:
page_livredor_consult.php:26 Uncaught TypeError: Cannot read properties of null (reading 'style')
at affichManipul (page_livredor_consult.php:26:60)
at HTMLButtonElement.onclick (page_livredor_consult.php:225:154)

Voici le lien de la page https://lenergie-vive.com/lacansera/es/libro/page_livredor_consult.php

et mon code 
<?php include("../texto.php");?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/lacansera/css/menu.css">
		<link rel="stylesheet" href="/lacansera/css/general.css">
		<link rel="stylesheet" href="/lacansera/css/libro.css">
		<link rel="stylesheet" href="/lacansera/css/entete.css">
		<link rel="stylesheet" href="/lacansera/css/cookies.css">
		<link rel="stylesheet" href="/lacansera/css/pie.css">
		<link rel="stylesheet" href="/lacansera/css/categoria.css">
		<link rel="stylesheet" href="/lacansera/css/noticias.css">
		<link rel="stylesheet" href="/lacansera/css/presentacion_noticias.css">
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="jquery.mlens-1.2.min.js"></script>
		
	<script type="text/javascript">


function affichManipul(chaine_caratere){
  if(document.getElementById('a_manipuler'+chaine_caratere).style.display == "none") {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "block";
    document.getElementById('texte_court'+chaine_caratere).style.display = "none";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "   -   ";
  } else {
    document.getElementById('a_manipuler'+chaine_caratere).style.display = "none";
    document.getElementById('texte_court'+chaine_caratere).style.display = "block";
    document.getElementById('toaffich'+chaine_caratere).innerHTML = "   +    ";
  }
}
</script>
</head>
 
   <body>
 
       <!-- L'en-tete -->
 
       <?php include("../inicio/entete.php"); ?>
 
       
      <BR> 	
		<div id="textcenter"><a href="page_libro.php"><img src="../../image/bulle_<?php echo $idioma;?>.gif" class="dejamensaje"></a></div>
		<BR>
		<p id="not_textcat"><?php echo $libro_oro; ?></p>
		<BR>
		
		
		
		<?php

		$consultez="../../messages.txt";
		readfile($consultez);
		?>
		
		<BR>
		<BR> 	
		
 
       <?php include("../inicio/pie.php"); ?>
 
   </body>
</html>


Pourrais-tu me dire ou est le probleme, je comprende que'elle est dans le JS mais je ne sais pas ce que veux dire le message.

Meci pour ton aide
0
jordane45 Messages postés 40050 Date d'inscription   Statut Modérateur Dernière intervention   4 759
 
Forcément.. tu lui passes un nombre commençant par un zéro ... donc c'est un zéro inutile .. donc le code le supprime...
Quand tu penses faire : 
a_manipuler0604202208639

En réalité, ton code, lui, comprend : 
a_manipuler604202208639


Pour éviter ça, il faut lui transmettre une STRING ( il suffit de mettre ta variable entre quote) 
onclick="affichManipul('0604202208639')
0
Réponse 4 / 5
mont_dani Messages postés 249 Statut Membre
 
J'ai passer le scrip JS a la fin du script mais cela ne change rien
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
mont_dani Messages postés 249 Statut Membre
 
En continuant d'essayer de résoudre ce problème, ja'i trouver que cela pouvait être um roblème de DOM JS. Et la je dois avouer que je plante car mes connaisssance en JS sont extra limitées et je n'arrive pas à résoudre mon pb.
0

Discussions similaires

imprimer plusieurs fois la meme photos sur la meme page
gaoule73 -
bertvert2 -

14 réponses
paiment 4x nickel sur top achat
Lohan -
Afrikarnak -

1 réponse
imprimer 4 fois le même ducument sur une page
ely83 -
ely83 -

6 réponses
imprimer un .pdf en plusieurs fois sur une même feuille
soleillevant -
Pierr10 -

2 réponses
Code source couleur de fond
Mehdi-Amg -
Techno01 -

9 réponses