11486 sujets

JavaScript, DOM et API Web HTML5

[marche dans body mais pas dans un fichier]

Bonjour, je ne comprends pas, pourquoi ce script marche dans ma page html mais pas dans un dossier .js Smiley ohwell . Merci de l'aide.

Ps:j'ai testé avec une alertbox je ne me suis pas trompé en l'appelant Smiley rolleyes dans mon head.


var acc = document.getElementsByClassName("menu_projet_html1");
var i;
 
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}


Et le morceau de html concerné.

<button class="menu_projet_html1">Mon premier site web</button>
            <div class="hidden_panel1">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>


Merci bcp ^^
Modifié par debutantplutotnul (19 Dec 2019 - 16:44)
Meilleure solution
Bonjour,
Pour répondre, il faudrait savoir où se trouvent les scripts JS dans le code OU l'appel au fichier JS dans le code. Ce n'est pas le script lui-même qui est en cause (puisqu'il marche si bien placé).

Mais intuitivement, je parie que :
1) il marche quand la balise <script> se trouve APRES l'affichage des tags <button> (ou à partir d'un onload)
2) il ne marche pas lorsque l'appel au fichier JS se trouve dans le <head> ou AVANT les <buttons>

La raison : les tags doivent être D'ABORD affichés pour être compris par le code JS
(sinon getElementsByClassName cherche dans un fichier HTML qui n'est pas encore totalement chargé, donc, pour lui, il n'y a rien)

NE MARCHE PAS :

<script>// le code</script>
<button><button><button><button>

<script src="fichier.js"></script>
<button><button><button><button>

<head>
    <script src="fichier.js"></script>
</head>
<body>
   <button><button><button><button>
</body>

MARCHE : 

<button><button><button><button>
<script>// le code</script>


<button><button><button><button>
<script src="fichier.js"></script>

<head>
    <script src="fichier.js"></script>
</head>
<body onload="functionDuFichier()">
   <button><button><button><button>
</body>

Modifié par Gill (28 Dec 2019 - 11:27)
Par ailleurs, ce code pourrait être simplifié (un seul event) :

var acc = document.getElementById("menu1");
// clic sur le menu plein de boutons
acc.addEventListener("click", function() {
    const button = event.target;// bouton cliqué ?
    if(button.tagName != 'BUTTON') return;
    button.classList.toggle("active");// bouton actif
    const panel = button.nextElementSibling;// quel panel ?
    if (panel.style.display === "block") {// action sur panel
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
});



<aside id="menu1">
   <button>Mon premier site web</button>
   <div>
         <p>Lorem ipsum</p>
   </div>
<aside>

Voir aussi ce topic, pour event.target
Modifié par Gill (28 Dec 2019 - 12:12)
Sujet clos
Aller à