Texte apparaît si on clique sur un bouton html

Fermé

Html

flav - 11 avril 2022 à 00:12
tarek_dotzero Messages postés 817 Date d'inscription jeudi 19 juillet 2007 Statut Membre Dernière intervention 12 avril 2022 - 12 avril 2022 à 03:04

Salut,

Je suis en train de faire un site web et je cherche à faire dérouler un texte quand on appuie sur un bouton, et replie le texte quand on réappuie. J'ai essayé un petit truc, mais ça ne marche pas:
Je fais ça dans un doc svelte.

Pour le java script j'ai:

var bool=true;
function cache(id){
	if(bool==true){
		document.getElementById(id).style.display='none';
		bool=false;
	}else{
		document.getElementById(id).style.display='block';
		bool=true;
	}
}

et dans l'html:

  <div id="aCacher">texte test</div>  
 <button on:click={cache('aCacher')} class="test">
    clique pour afficher
 </button>

Je ne comprends pas ce qui va pas. Merci de votre aide.

A voir également:

2 réponses

Réponse 1 / 2

DoctorHow
11 avril 2022 à 21:56

Salut et en pur JS parce que je ne connait pas doc svelte ça donne quoi?

On peut très bien se passer de la variable bool puisqu'il suffit de tester la valeur de display.

function cache(id){
	if(document.getElementById(id).style.display=='none'){
		document.getElementById(id).style.display='block';
	}else{
document.getElementById(id).style.display=='none'
	}
}

Mieux aussi d'utiliser .addEventListener que sur l'attribut HTML onclick (ça me paraît bizarre quand même cette syntaxe on:click même avec un framework on a pas le droit de changer la syntaxe de HTML).

<button id=test>
    clique pour afficher
 </button>

Permet de rajouter au JavaScript

document.getElementById('test').addEventListener('click', cache('aCacher'), false)

Discussions similaires

Afficher / masquer ou plier/déplier une zone de texte

Cliquer sur un bouton pour faire apparaitre un paragraphe/image

PHP Afficher texte après clique sur un bouton

Afficher du texte en cliquant sur un mot

Apparition bouton retourner en haut de la page

Création de bouton dynamique HTML/CSS (onclick)

Discussions similaires

Newsletters