Probleme sur l'exercice 6 (selection par classe) dans le programme "fonctions et selecteurs" du jQuery


#1



https://www.codecademy.com/fr/courses/web-beginner-fr-FR-w5vxj/1/2

jQuery : fonctions et sélecteurs : exercice 6 - selection par classe

Mon code fonctionne, quand je clique sur le bouton les 'div' orange disparaissent, il me semble avoir parfaitement rempli l'exercice mais il m'affiche toujours le message d'erreur suivant : " Oups, merci de réessayer. Object doesn't support property or method 'cacher' "

J'ai verifié tous le code il n'y a nul part ecrit "cacher" (et je suis certain de ne pas l'avoir ecris moi meme), je copie/colle ci-dessous l'index html, le css et le js. Il n'y a pas une seule ligne, un seul mot de plus. Impossible de passer l'exercice normalement, l'erreur apparaît toujours.

html : 
<!DOCTYPE html>
<html>
	<head>
		<title>Disparition</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div class="vanish"></div>
        <div class="vanish"></div>
        <div class="vanish"></div>
        <div class="vanish"></div>
        <br/><button>Cliquez sur moi !</button>
	</body>
</html>

CSS :  
.vanish {
    height: 100px;
    width: 100px;
    display: inline-block;
    background-color: #F38630;
    border-radius: 5px;
}

JS :
$(document).ready(function() {
    $('button').click(function() {
        $('.vanish').fadeOut('slow');
    });
});


#2

Salut c'est un bug mais tu peux trouver la solution dans cette discussion


#3

merci beaucoup, désolé j'ai cherché quelques réponses sur les forum mais je n'étais pas tombé sur ce post (rangé dans HTML/CSS, j'avoue que j'ai surtout regardé dans les exercices JS et jQuery ^_^)


#4

Bonjour à tous ! Voici le code qui a fonctionné pour moi :

$(document).ready(function() {
$('button').click(function() {
$('.vanish').fadeOut(function('slow') {
});
});
});

@ plus !


#5

Désolé pour l'indentation ça a corrigé tout seul :-/


#6

Hello,

même problème pour moi, merci hermyo pour la solution. Je m'interroge toutefois sur cette syntaxe, notamment les guillements simples dans les parenthèses en argument d'une fonction...
Normalement fadeOut('slow') devrait fonctionner...

Bug chez codeacademy ?


#7

Bonjour,
Il y a effectivement un bug, on est obligé d'utiliser le code de @hermyo pour valider l'exercice.
Cependant, avec ce code la console affiche une erreur et les formes oranges ne disparaissent pas.
Si on veut un résultat, il faut donc retirer les accolades inutiles et la fin de parenthèse (mais dans ce cas l'exercice ne se valide pas).

@rdhvnatrc : D'après ce que j'ai compris, que le guillemet soit simple ' ou double " ne change rien, c'est la même chose (du moins cela revient au même dans un code JavaScipt). Je crois qu'il y a juste une exception en jQuery pour laquelle il faut obligatoirement utiliser des guillemets simples (je crois que c'est pour la transformation en objet jQuery avec $('futur_objet')).

Bonne journée.