Sujet Précédent Sujet Suivant

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

Fermé
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 - 22 nov. 2021 à 18:16
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 6 avril 2022 à 22:23
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 nov. 2021 à 19:49
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 nov. 2021 à 15:52
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
23 nov. 2021 à 18:44
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
23 nov. 2021 à 19:09
Bien sûr
0
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
24 nov. 2021 à 15:21
Supeeeeeer. C est parfait. Merci pour ton aide
0
Réponse 2 / 5
mont_dani Messages postés 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
22 nov. 2021 à 20:30
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
6 avril 2022 à 09:48
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
6 avril 2022 à 22:23
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
6 avril 2022 à 14:31
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 229 Date d'inscription mardi 6 juin 2017 Statut Membre Dernière intervention 10 février 2024
6 avril 2022 à 18:48
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

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

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

1 réponse
Que peut faire 3fois/j un homme, mais qu'1fois/j une femme
Soter -
Raymond PENTIER -

1 réponse
imprimer plusieurs fois la meme photos sur la meme page
gaoule73 -
bertvert2 -

14 réponses
[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses