Discussion :

[Benji12]

Hello,

Je me lance dans le js et pour mon 1er script, j'ai tenté de faire un truc simple :

J'ai deux div "contact" et "contact-choice", par défaut, c'est la première qui est affichée. Au clic sur un bouton, je voudrais afficher la deuxième (et vice versa).
Sous code-pen (https://codepen.io/waf-alors/pen/ebrddZ) , j'ai fais un truc qui fonctionne bien, mais lorsque je l'intègre sur mon site, ça ne fonctionne plus :

Uncaught ReferenceError: contactchoice is not defined at HTMLInputElement.onclick

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
document.getElementById("contact").addEventListener("click", function contact() {
  document.getElementById('contact').style.display = 'block';
  document.getElementById('contact-choice').style.display = 'none';
  console.log('contact');
});
 
 
document.getElementById("contactchoice").addEventListener("click", function contactchoice () {
  document.getElementById('contact-choice').style.display = 'block';
  document.getElementById('contact').style.display = 'none';
  console.log('contact');
});

Je récupère bien les id, mais visiblement, il ne trouve pas les fonctions. D'où vient le problème ?

[SpaceFrog]

A quel endroit est placé le script dans ta page ?
=> a quel moment est il exécuté ?

[Benji12]

Le script est placé en bas de page, juste avant la balise </body>
J'ai deux boutons pour switcher entre les deux divs, donc le script est appelé au clic

[SpaceFrog]

a priori il ne trouve pas l'element avec l'id contact-choice ...

[Benji12]

J'en suis arrivé à la même conclusion, j'ai donc fait le test suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
console.log("script #1: %o", document.getElementById("contact")); //
console.log("script #2: %o", document.getElementById("contact-choice"));

et dans la console j'ai bien contact-choice

script #1: <div id="contact" style="background: red; display: block;">....</div>
script #2: <div id="contact-choice" style="background: grey; display: none;">....</div>

[SpaceFrog]

et l'element est instancié quant le addevent est lancé ?