IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Javascript et classes


Sujet :

JavaScript

  1. #1
    Membre actif Avatar de Basile le disciple
    Homme Profil pro
    étudiant Centrale Supélec
    Inscrit en
    Avril 2013
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : étudiant Centrale Supélec

    Informations forums :
    Inscription : Avril 2013
    Messages : 147
    Points : 279
    Points
    279
    Par défaut Javascript et classes
    Bonjour à tous,

    Je débute le javascript, le CSS et le HTML5 depuis quelques semaines, et je suis confronté à un problème depuis 3 jours, à s'en arracher les cheveux:

    je voudrais essayer de reproduire cet effet. J'en suis au stade des lumieres qui s'allument et s'éteignent...

    La seule solution que j'ai trouvée et de changer la classe de chaque lumière(des li avec des identifiants lumiere_1/2 etc...) à chaque click sur les icones.

    le CSS
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //alluméé
    .lumiere_allume{
        background-color: white; 
        box-shadow: -1px 1px 10px 3px white;     
    }
    //éteinte
        .lumiere_eteinte{
        background-color: rgb(25,25,25);
        box-shadow: none;
    }

    le javascript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    function clic(valeur){
        //valeur correspond à l'indice des li
        for (var i=1;i<5;i++){
            document.getElementById('lumiere_'+i).className='lumiere_eteinte';    
        }
        document.getElementById('lumiere_'+(valeur+1)).className='lumiere_allume';
    }
    et le HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul id="lumieres">
        <li id="lumiere_1"></li>
        <li id="lumiere_2"></li>
        <li id="lumiere_3"></li>
        <li id="lumiere_4"></li>
    </ul>

    mais quand je compile, les couleurs de fond ne changent pas au click. Pourquoi???
    Y a-t-il confrontation avec les identifiants(vide) et les classes??

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    mais quand je compile
    Tu compiles du JavaScript toi ?

    Ta fonction est appelée à quel moment ?

  3. #3
    Expert confirmé
    Avatar de TiranusKBX
    Homme Profil pro
    Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Inscrit en
    Avril 2013
    Messages
    1 476
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2013
    Messages : 1 476
    Points : 4 806
    Points
    4 806
    Billets dans le blog
    6
    Par défaut
    met dans ton code HTML
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul id="lumieres">
        <li id="lumiere_1" onclick="clic(1);"></li>
        <li id="lumiere_2" onclick="clic(2);"></li>
        <li id="lumiere_3" onclick="clic(3);"></li>
        <li id="lumiere_4" onclick="clic(4);"></li>
    </ul>

  4. #4
    Membre confirmé
    Homme Profil pro
    Déveleoppeur Web/Mobile
    Inscrit en
    Avril 2013
    Messages
    330
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Déveleoppeur Web/Mobile
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2013
    Messages : 330
    Points : 545
    Points
    545
    Par défaut
    Il nous faut voir le code ou tu initialises valeur et appelle ta fonction JS

  5. #5
    Membre actif Avatar de Basile le disciple
    Homme Profil pro
    étudiant Centrale Supélec
    Inscrit en
    Avril 2013
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : étudiant Centrale Supélec

    Informations forums :
    Inscription : Avril 2013
    Messages : 147
    Points : 279
    Points
    279
    Par défaut
    Tu compiles du JavaScript toi ?
    Pas faux, pas faux... mais comme je faisais du pascal delphi avant, j'ai gardé le vocabulaire

    voilà le moment où j'appelle la fonction :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="icones">
        <ul class="boite">
            <li onclick="clic(0)"><div>#1</div></li>              
            <li onclick="clic(1)"><div>#2</div></li>
            <li onclick="clic(2)"><div>#3</div></li>
            <li onclick="clic(3)"><div>#4</div></li>
        </ul>    
    </div>

    Mais je ne pense pas que le problème viennent de là car l'ombre bouge bien, signifiant que le onclick est bien déclenché mais la couleur de fond ne change pourtant pas....

  6. #6
    Expert confirmé
    Avatar de TiranusKBX
    Homme Profil pro
    Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Inscrit en
    Avril 2013
    Messages
    1 476
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2013
    Messages : 1 476
    Points : 4 806
    Points
    4 806
    Billets dans le blog
    6
    Par défaut
    ça change quelque chosE si tu remplace "background-color" par "background" ?

  7. #7
    Membre actif Avatar de Basile le disciple
    Homme Profil pro
    étudiant Centrale Supélec
    Inscrit en
    Avril 2013
    Messages
    147
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 25
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : étudiant Centrale Supélec

    Informations forums :
    Inscription : Avril 2013
    Messages : 147
    Points : 279
    Points
    279
    Par défaut
    ça change quelque chosE si tu remplace "background-color" par "background" ?
    Oui!!
    J'aurais jamais deviné que c'était ça le problème. Merci beaucoup à tous ceux qui ont pris la peine de me répondre!! C'était tellement idiot...

  8. #8
    Expert confirmé
    Avatar de TiranusKBX
    Homme Profil pro
    Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Inscrit en
    Avril 2013
    Messages
    1 476
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Développeur C, C++, C#, Python, PHP, HTML, JS, Laravel, Vue.js
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2013
    Messages : 1 476
    Points : 4 806
    Points
    4 806
    Billets dans le blog
    6
    Par défaut
    la propriété "background-color" étant souvent fixe cela ne m'étonne pas
    et c'est aussi pourquoi j'évite de l'utiliser

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 135
    Points : 44 923
    Points
    44 923
    Par défaut
    Bonjour,
    Citation Envoyé par Basile le disciple
    J'aurais jamais deviné que c'était ça le problème(...)

    je ne vois pas en quoi cela pourrait interférer sauf si d'autres valeurs sont donnés par après sur le background, background-color n'étant qu'une partie de la propriété background.

    Par contre dans ton code CSS les commentaires ne sont pas valides et font que le CSS n'est pas pris en compte
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /*alluméé -- commentaire  valide --*/
    .lumiere_allume{
        background-color: white; 
        box-shadow: -1px 1px 10px 3px white;     
    }
    /* éteinte  -- commentaire  valide --*/
    .lumiere_eteinte{
        background-color: rgb(25,25,25);
        box-shadow: none;
    }

    Comment insérer un commentaire dans une feuille de style ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] Javascript getElement--> Class
    Par Pymento dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 29/09/2008, 14h42
  2. appel d'une class java en javascript ou autre
    Par tit_oune dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 04/04/2006, 16h24
  3. Appeler une classe CSS avec Javascript
    Par p0Kep0K dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/02/2006, 15h50
  4. [POO] Question class php=>javascript
    Par jeff_! dans le forum Langage
    Réponses: 4
    Dernier message: 05/01/2006, 16h10
  5. [JavaScript] Changer la class CSS via l'id
    Par Romalafrite dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/11/2005, 16h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo