Problème sur un code test

Résolu
PhantomDark Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour ! J'aimerais avoir votre avis sur un code test qui ne marche pas complètement....
J'ai créé un bouton qui affiche quelque chose, et modifie le bouton en question pour que quand il soit cliqué à nouveau, le texte disparaisse.
Le code HTML : 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Diablo III</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
	<h1>TEST</h1>
	<span id="spanbuttonmain"><button id="button">Montrer</button></span>

	<ul id=abmain></ul>

	<script src="test.js"></script>
</body>
</html>


Le code JS : 
function testIfRight() {

	if (document.getElementById("spanbuttonmain") == "<button id=\"buttonshow\">Montrer</button>") {
		hideMainCompFun();
	} else {
		showMainCompFun();
	}

}

function showMainCompFun() {

	document.getElementById("spanbuttonmain").innerHTML = "<button id=\"buttonhide\">Cacher</button>";

	var testElt = document.createElement("li"); // Création d'un élément li
	testElt.id = "try"; // Définition de son identifiant
	testElt.textContent = "Test"; // Définition de son contenu textuel
	document.getElementById("abmain").appendChild(testElt); // Insertion du nouvel élément

    console.log("Montré !");

}

function hideMainCompFun() {

	document.getElementById("abmain").innerHTML = "";
	document.getElementById("spanbuttonmain").innerHTML = "<button id=\"buttonshow\">Montrer</button>";

    console.log("Caché !");

}


var showMainComp = document.getElementById("button");

// Ajout d'un gestionnaire pour l'événement click

showMainComp.addEventListener("click", testIfRight);
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Tu changes le bouton.. et son ID ... normal que l'action du click ne se lance plus...

Essaye ça : 

<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<title>Diablo III</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
	<h1>TEST</h1>
	<span id="spanbuttonmain"><button id="button">Montrer</button></span>
	<ul id=abmain></ul>
  
  
<script type='text/javascript'>
function testIfRight() {
  if(document.getElementById("button").innerHTML =="Montrer"){
		showMainCompFun();
    document.getElementById("button").innerHTML = "Cacher";
	} else {
    hideMainCompFun();
    document.getElementById("button").innerHTML = "Montrer";
	}

}

function showMainCompFun() {
	var testElt = document.createElement("li"); // Création d'un élément li
	testElt.id = "try"; // Définition de son identifiant
	testElt.textContent = "Test"; // Définition de son contenu textuel
	document.getElementById("abmain").appendChild(testElt); // Insertion du nouvel élément
}

function hideMainCompFun() {
	document.getElementById("abmain").innerHTML = "";
  console.log("Caché !");

}


var showMainComp = document.getElementById("button");

// Ajout d'un gestionnaire pour l'événement click

showMainComp.addEventListener("click", testIfRight); 
</script>
</body>
</html>


NB : Tu ne montres/caches pas .. tu Ajoutes/supprimes les éléments...
Pour afficher/masquer il faudrait utiliser le style DISPLAY ( à none ou à block )

1