Changer la propriété CSS en cliquant sue un bouton

hatfab
Javascript

Bonjour,

Je voudrais changer la valeur de la propriété 'display' d'une div en cliquant sur un bouton. Je cherche depuis un bon moment mais je ne comprends pas pourquoi cela ne fonctionne pas. Voici mon code :
1 - Je charge mon .js dans mon header :

<script type="text/javascript" src="https://www.metapsychique.org/wp-content/themes/universe_theme_child/js/script.js?ver=5.6" id="button-imi-js"></script>

2- Mon html :

<button id="button" class="button-imi button-imi-plus" type="submit" name="button" onclick="showetape2()">passer à l'étape 2...</button>
<div class="wp-block-group etap2">
    <div class="wp-block-group__inner-container">
        <h2 id="h.p_ID_86">Étape 2/2</h2>
    </div>
</div>

3 - Mon CSS 

.etap2  {
        display:none;
}

4 - Mon JS

function showetape2() {
    var elem = document.getElementsByClassName('etap2');
    elem.style.display = 'block';
  };

Quelqu'un pourrait-il m'aider à comprendre ce qui ne fonctionne pas ?
Merci de votre aide

5 réponses

Mickael Christine
Réponse acceptée

Hello hello, pas besoin de javascript pour ça
Tu peux tout faire en css, mais faut juste tricher sur ton bouton
Dans ton html, tu remplace ton bouton par ceci

    <input type="checkbox" name="step2" id="step2" />
    <label for="step2" class="button-label">passer à l'étape 2...</label>

    <div class="wp-block-group etap2">
      <div class="wp-block-group__inner-container">
        <h2 id="h.p_ID_86">Étape 2/2</h2>
      </div>
    </div>

Et dans ton css

/*  Ici tu cache la checkbox uniquement, tout en laissant le label visible, 
qui lui est lié à la checkbox grace au for="step2" */

#step2 {
  display: none;
}

/* Tu design ton label pour qu'il ressemble à un bouton */
.button-label {
  border: 1px solid black;
  padding: 10px;
  background: grey;
  color: white;
  cursor: pointer;
}

/* Tu cache ta div */
.etap2 {
  display: none;
}

/* Sur le pseudo element checked de ta checkbox tu viens ciblé l'element suivant grace au tild ~ 
et tu le rend visible quand checked */
#step2:checked ~ .etap2 {
  display: block;
}

Si malgré tout tu veux continuer en javascript, voici la correction de ton JS

function showetape2() {
  var elem = document.querySelector(".etap2");
  elem.style.display = "block";
}

Ton erreur vient de getElementsByClassName, qui te renvoie un tableau de class (HTMLCollection) , donc tu ne pouvais pas appliquer directement du style dessus.

Si tu voulais que ça fonctionne il aurait fallut ajouté l'index de l'element ciblé

function showetape2() {
  var elem = document.getElementsByClassName("etap2");
  // Ici on ajoute l'index 0
  elem[0].style.display = "block";
}

Petit conseil pour la prochaine fois, quand tu fais tu JS, debug ton code avec des console.log() comme ceci

function showetape2() {
console.log('Je rentre dans ma fonction')
  var elem = document.getElementsByClassName("etap2");
  console.log('elem =>', elem)
  // Ici on ajoute l'index 0
  elem[0].style.display = "block";
}

Bon courage pour la suite

hatfab
Auteur

Salut ! génial, merci beaucoup pour toutes ces explications très instructives et pour le temps passer à les rédiger. Je vais essayer les deux méthodes et je reviens te dire si j'ai réussi à faire fonctionner tout ça.
Bonne journée !

hatfab
Auteur

Tout fonctionne très bien, merci encore pour ton aide précieuse et surtout très instructive. Bonne continuation

Twentyfour

Message tardif, mais je vois une erreur dans ton code suivant:

function showetape2() {
    var elem = document.getElementsByClassName('etap2');
    elem.style.display = 'block';
 };

Comme le mentionne la méthode document.getElementsByClassName, elle renvoie des éléments, sous-entendu un tableau.
Donc la ligne ci-dessous n'a pas de sens.

elem.style.display = 'block';

Soit tu changes la propriété display d'un seul élément. Par exemple le premier: elem[0].
Soit tu changes la propriété de tous les éléments à l'aide d'une boucle: elem.forEach(e => { e.style.display = 'block' })

hatfab
Auteur

Salut Twentyfour, merci de ta réponse qui complète celle de Mickael Christine.
Bonne continuation