Problème sur un code test

Résolu/Fermé

PhantomDark Messages postés 1 Date d'inscription dimanche 23 avril 2017 Statut Membre Dernière intervention 23 avril 2017 - 23 avril 2017 à 23:23
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 23 avril 2017 à 23:54

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:

Problème sur un code test
Test performance pc - Guide
Test composant pc - Guide
Code asci - Guide
Redmi note 13 5g test - Accueil - Téléphones
Code puk bloqué - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
23 avril 2017 à 23:54

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 )

Discussions similaires

PXE-E61 : media test failure, check cable

Tester une config