Bonjour.

Je suis en train de créer un formulaire dans lequel je dois mettre un bouton qui affiche ou cache de l'html lorsque l'on appuie dessus. Le problème est que lorsque je vais sur la page, le texte qui doit normalement être caché apparait, et rien ne se passe lorsque j'appuie sur le bouton. Quelqu'un pourrait-il m'aider?

Voici mon code dans la partie php:

echo '<button type="button" onclick="toggle_div(this,\'tache\');"></button>';
echo '<div id="id_du_div" style="display:none;">';
echo 'ICI SE TROUVE CE QUE JE VEUX AFFICHER/CACHER';
echo'</div>';

Et voici la fonction en js:

<script type="text/javascript">
	function toggle_div(bouton, id) { // On déclare la fonction toggle_div qui prend en param le bouton et un id
		var div = document.getElementById(id); // On récupère le div ciblé grâce à l'id
		if(div.style.display=="none") { // Si le div est masqué...
			div.style.display = "block"; // ... on l'affiche...
			bouton.innerHTML = "Cacher tâches"; // ... et on change le contenu du bouton.
		} else { // S'il est visible...
			div.style.display = "none"; // ... on le masque...
			bouton.innerHTML = "Afficher tâches"; // ... et on change le contenu du bouton.
		}
	}
</script>

Je vous remercie d'avance pour votre aide.

-
Edité par Anonyme 19 janvier 2017 à 12:42:47

Salut,

Le problème ici, c'est que dans le javascript, tu cherches un élément avec l'id tache, tout en voulant cibler le div, donc ici l'id id_du_div.

Donc soit, tu change l'id du div en tache, soit l'id passé en référence à la fonction en id_du_div.

Erreur de modification que j'avais pas remarquée. Merci de me l'avoir signalée.

La fonction marche, mais j'ai un autre soucis maintenant.

Je veux faire apparaitre/masquer un bloc de code, mais seule la 1ère ligne est prise en compte:

Voici mon bloc de code qui se trouve entre les balises <div> et </div>:

echo '<h3>Tâches</h3>';
// Ligne "Nom de la tâche"
echo '<tr>';
echo '<td><label for="nom">Nom :</label></td>'; 
echo '<td><input type="text" name="nom" id="nom" value="' . $donnees['nom'] . '"></td>'; 
echo "</tr>\n";
						
// Ligne "ID de la tâche"
echo '<tr>';
echo '<td><label for="nomcourt">ID :</label></td>'; 
echo '<td><input type="text" name="nomcourt" id="nomcourt" value="' . $donnees['adresse1'] . '"></td>'; 
echo "</tr>\n";
						
// Ligne "Date de fin de la tâche"
echo '<tr>';
echo '<td><label for="datefin">Date de fin :</label></td>'; 
echo '<td><input type="text" name="datefin" id="datefin" value="' . $donnees['adresse2'] . '"></td>'; 
echo "</tr>\n";
						
// Ligne "Avancement de la tâche"
echo '<tr>';
echo '<td><label for="avancement">Avancement :</label></td>'; 
echo '<td><input type="text" name="avancement" id="avancement" value="' . $donnees['nom'] . '"></td>'; 
echo "</tr>\n";

Dans ce bloc, seule la ligne (echo '<h3>Tâches</h3>';) est prise en compte par la fonction.

Auriez-vous une idée du problème?

-
Edité par Anonyme 19 janvier 2017 à 13:16:52

Bizarre, je n'ai pas de problème de mon côté.

<?php

$donnees = array('adresse1' => "adresse 1",
				'adresse2' => 'adresse 2',
				'nom' => 'nom');

echo '<button type="button" onclick="toggle_div(this,\'todisplay\')">Cacher taches</button>';
echo '<div id="todisplay" style="display:none;">';
echo '<h3>Taches</h3>';
// Ligne "Nom de la tache"
echo '<tr>';
echo '<td><label for="nom">Nom :</label></td>';
echo '<td><input type="text" name="nom" id="nom" value="' . $donnees['nom'] . '"></td>';
echo "</tr><br />";

echo '<tr>';
echo '<td><label for="nomcourt">ID :</label></td>';
echo '<td><input type="text" name="nomcourt" id="nomcourt" value="' . $donnees['adresse1'] . '"></td>';
echo "</tr><br />";

// Ligne "Date de fin de la tache"
echo '<tr>';
echo '<td><label for="datefin">Date de fin :</label></td>';
echo '<td><input type="text" name="datefin" id="datefin" value="' . $donnees['adresse2'] . '"></td>';
echo "</tr><br />";

// Ligne "Avancement de la tache"
echo '<tr>';
echo '<td><label for="avancement">Avancement :</label></td>';
echo '<td><input type="text" name="avancement" id="avancement" value="' . $donnees['nom'] . '"></td>';
echo "</tr><br />";
echo '</div>';

?>

<script type="text/javascript">
	function toggle_div(bouton, id) { // On declare la fonction toggle_div qui prend en param le bouton et un id
		var div = document.getElementById(id); // On recupere le div cible grace a l'id
		if(div.style.display=="none") { // Si le div est masque...
			div.style.display = "block"; // ... on l'affiche...
			bouton.innerHTML = "Cacher taches"; // ... et on change le contenu du bouton.
		} else { // S'il est visible...
			div.style.display = "none"; // ... on le masque...
			bouton.innerHTML = "Afficher taches"; // ... et on change le contenu du bouton.
		}
	}
</script>

Quand tu regardes dans la console du navigateur (F12 sur chrome), il y a un message d'erreur?

Quand je teste ton code, ça marche pourtant...

Vu que mon bloc d'HTML à afficher/cacher et la fonction sont sur des fichiers différents, il n'y aurait pas un lien à faire par hasard?

Non, je pense pas. Si je teste avec le javascript dans un fichier séparé, ça fonctionne pareil.

Pour les erreurs dans la console, y'a rien?

Et à tout hasard, l'encodage de tes fichiers, c'est en utf-8 sans bom? Parce qu'en copiant/collant le code dans notepad++, y'a eu quelques problèmes de ce côté, mais ça n'a peut être rien à voir.

J'ai trouvé le problème!

J'avais oublié de sortir ce bloc d'une table. Ca marche maintenant.

merci beaucoup pour ton aide!