11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Un bouton pour deux actions

Bonjour à tous Smiley biggrin .
Je viens ici car je n'arrive pas à trouver une réponse à ma question sur internet. Smiley sweatdrop
Depuis un moment je cherche un moyen d'afficher un texte et d'en cacher un autre en même temps.
Je m'explique Smiley biggol j'ai besoin d'avoir un bouton et du texte, quand j’appuie sur le bouton mon texte disparait et est remplacé par un autre texte Smiley ravi .

Voilà mon html:
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8"/>
		<link rel="stylesheet" type="text/css" href="index.css">
		<script type="text/javascript" src="index.js"></script>
		<title>Page web de test</title>
	</head>
	<body>
		<div id="Menu">
			<h1 id="TexteMenu">Page web de test</h1>
		</div>

		<div id="content">
			<button class="onoff" type="button">ON/OFF</button>
		</div>
	</body>
</html>


et donc j'aurai besoin d'un script ou une fonction qui me permet de faire ça Smiley lol .

Merci d'avance pour vos réponses Smiley lol .
Salut

Exemple :

#texteCacher {
  display: none;
}


<div id="texteVariable">
    <p>Un premier texte</p>
</div>

<div id="texteCacher">
    <p>Un deuxième texte</p>
</div>

<button id="btnToggleText" type="button">Change le texte</button>


const
    elemBtnToggleText = document.querySelector('#btnToggleText'),
    elemTexteVariable = document.querySelector('#texteVariable'),
    elemTexteCacher = document.querySelector('#texteCacher');

elemBtnToggleText.addEventListener('click', ev => {
    let htmlTmp = elemTexteVariable.innerHTML;

    elemTexteVariable.innerHTML = elemTexteCacher.innerHTML;
    elemTexteCacher.innerHTML = htmlTmp;
}, {
    capture: false,
    passive: true,
    once: false
});

Modifié par danielhagnoul (12 Sep 2018 - 22:44)
Hello Smiley biggrin merci pour ta réponse, mais il y a une chose qui ne joue pas. Quand j'appuie sur le bouton il ne se passe rien, et quand je regarde ton code pour le bouton il n'y a pas d’appel de fonction je ne sais pas si c'est correct ? Smiley lol
J'ai trouvé !!! Smiley biggrin j'ai juste mit ton code JavaScript dans une fonction mais le seul petit problème c'est que je dois appuyer deux fois sur le bouton pour changer le texte Smiley ohwell
J'ai trouvé pourquoi je dois cliquer deux fois Smiley confus


C'est cette ligne de code qui ne fonctionne pas mais si je l'enlève plus rien de fonctionne

elemBtnToggleText.addEventListener('click',


Voilà le script en entier.

function Texte (Texte)
{
	const
    elemBtnToggleText = document.querySelector('#btnToogleText'),
    elemTexteVariable = document.querySelector('#texteVariable'),
    elemTexteCacher = document.querySelector('#texteCacher');

	elemBtnToggleText.addEventListener('click', ev => {
    let htmlTmp = elemTexteVariable.innerHTML;

    elemTexteVariable.innerHTML = elemTexteCacher.innerHTML;
    elemTexteCacher.innerHTML = htmlTmp;
	}, {
    capture: false,
    passive: true,
    once: false
	});
}


Merci de votre aide Smiley lol . !
Modifié par Theo__0 (17 Sep 2018 - 16:07)
SOLUTION ! J'ai trouver la solution en touchant un peux le JS Smiley lol

Code html:

<div id="texteVariable">
    <p>Un premier texte</p>
</div>

<div id="texteCacher">
    <p>Un deuxième texte</p>
</div>

<button id="btnToggleText" type="button" onclick="Texte(Texte)">Change le texte</button>


Code JavaScript:

function Texte (Texte)
{
	const
    elemBtnToggleText = document.querySelector('#btnToogleText'),
    elemTexteVariable = document.querySelector('#texteVariable'),
    elemTexteCacher = document.querySelector('#texteCacher');

    let htmlTmp = elemTexteVariable.innerHTML;

    elemTexteVariable.innerHTML = elemTexteCacher.innerHTML;
    elemTexteCacher.innerHTML = htmlTmp;
}


Code CSS:

#texteCacher {
  display: none;
}


Merci de ton aide Smiley ravi Smiley biggrin
Meilleure solution
Sujet clos
Aller à