Texte apparaît si on clique sur un bouton html

Fermé
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.

2 réponses

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)

0