aide tp html/css + javascript sur le forum Programmation - 10-11-2021 20:43:48

Liste des sujets

aide tp html/css + javascript

bkrv

Niveau 1

10 novembre 2021 à 20:43:48

Bonsoir en gros voici mon problème, j'ai un tp à faire et une des instructions c'est "Faire disparaitre progressivement une image en cliquant sur un paragraphe" j'ai trouvé pour faire une petite animation avec du css mais mon problème c'est le JS avec la fonction onclick

le html :

<p onclick="ShowAndHide()">Cliquez moi</p>
<img id="Image" src="image.jpg" alt="">
<script src="app.js"></script>

l'animation css:

#Image
{
display: block;
width: 20%;
margin: auto;
opacity: 1;
transition: 2s;
}

#Image.fermee
{
width: 0%;
opacity: 0;
transition: 2s;
}

et enfin le JS qui pose problème:

var Img = document.getElementById("Image");

function ShowAndHide() {
if (Img.className == "") {
Img.className == "fermee"
}
}

merci d'avance !

Magrozz

Niveau 7

10 novembre 2021 à 21:43:46

Qu'est-ce qui pose problème ?
As-tu testé les éléments de ton code individuellement ou tu as juste c/c du code et ça fonctionne pas ?

Message édité le 10 novembre 2021 à 21:44:23 par Magrozz

cybevil

Niveau 27

10 novembre 2021 à 21:52:17

Ton code fonctionne mais il y a 2 petits soucis.

D'abord dans ton if en javascript c'est : Img.className = "fermee" avec un seul égal pour l'affectation, pas 2 égals sinon c'est une comparaison.

Ensuite ton html doit avoir une structure correct et doit importer ton css comme ceci :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p onclick="ShowAndHide()">Cliquez moi</p>
    <img id="Image" src="image.jpg" alt="">
    <script src="app.js"></script>
</body>
</html>

Message édité le 10 novembre 2021 à 21:54:28 par cybevil

bkrv

Niveau 1

10 novembre 2021 à 22:04:47

Le 10 novembre 2021 à 21:43:46 :
Qu'est-ce qui pose problème ?
As-tu testé les éléments de ton code individuellement ou tu as juste c/c du code et ça fonctionne pas ?

J'avais test l'animation, elle fonctionne, et au niveau du JS j'avais regardé sur internet mais quand je clique le paragraphe il se passe absolument rien donc je comprends pas d'où vient l'erreur

Oshlatant

Niveau 10

10 novembre 2021 à 22:04:50

Le 10 novembre 2021 à 21:52:17 cybevil a écrit :
Ton code fonctionne mais il y a 2 petits soucis.
D'abord dans ton if en javascript c'est : Img.className = "fermee" avec un seul égal pour l'affectation, pas 2 égals sinon c'est une comparaison.
Ensuite ton html doit avoir une structure correct et doit importer ton css comme ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p onclick="ShowAndHide()">Cliquez moi</p>
    <img id="Image" src="image.jpg" alt="">
    <script src="app.js"></script>
</body>
</html>

Pas besoin de mettre la balise script en bas du body sauf pour internet explorer,
tu la mets dans le head avec l'attribut async

+ évite d'utiliser l'attribut onClick, fait ton querySelector dans le js, puis tu ajoutes un eventListener pour le click

cherche MDN + nom du truc si tu sais pas

Magrozz

Niveau 7

10 novembre 2021 à 22:05:47

Le 10 novembre 2021 à 22:04:47 :
Le 10 novembre 2021 à 21:43:46 :
Qu'est-ce qui pose problème ?
As-tu testé les éléments de ton code individuellement ou tu as juste c/c du code et ça fonctionne pas ?
J'avais test l'animation, elle fonctionne, et au niveau du JS j'avais regardé sur internet mais quand je clique le paragraphe il se passe absolument rien donc je comprends pas d'où vient l'erreur

Oui l'erreur c'est juste qu'il y a un égal en trop comme cybevil l'a mentionné.

bkrv

Niveau 1

10 novembre 2021 à 22:09:02

Le 10 novembre 2021 à 21:52:17 :
Ton code fonctionne mais il y a 2 petits soucis.
D'abord dans ton if en javascript c'est : Img.className = "fermee" avec un seul égal pour l'affectation, pas 2 égals sinon c'est une comparaison.
Ensuite ton html doit avoir une structure correct et doit importer ton css comme ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <p onclick="ShowAndHide()">Cliquez moi</p>
    <img id="Image" src="image.jpg" alt="">
    <script src="app.js"></script>
</body>
</html>

Merci beaucoup le problème venait bien du égal en trop dans le JS, concernant le HTML j'avais juste écrit ces 3 lignes pour gagner de la place dans le post, la structure de base du html est importée automatiquement grâce à vscode :D

Aide à l'achat Mac
Création de sites web
Internet
Macintosh
Création de Jeux
Linux
Programmation
Steam Deck
Hardware

La vidéo du moment

News jeu

54 149 spectateurs

L'un des meilleurs jeux de survie en monde ouvert pour PC en 2025 arrive sur PS5 et sera "gratuit" sur PlayStation Plus, mais la concurrence ne sera pas en reste

Voir PlayStation 5 édition standard sur E.Leclerc

Toutes les news jeu