LU07: Debugging – Fehler finden und verstehen

<!-- ❌ Dateiendung fehlt – Browser findet die Datei nicht, kein Console-Fehler -->
<link href="style" rel="stylesheet">
<script src="script"></script>
 
<!-- ✅ Korrekt -->
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>

<!-- ❌ Typografische Anführungszeichen aus Word oder Moodle – Browser lädt die Datei nicht -->
<link href=„style.css" rel=„stylesheet">
 
<!-- ✅ Gerade Anführungszeichen -->
<link href="style.css" rel="stylesheet">

/* ❌ 'heihgt' statt 'height' – Browser ignoriert diese Zeile einfach, kein Console-Fehler */
.panel.open {
  heihgt: auto;
  opacity: 1;
}
 
/* ✅ Korrekt */
.panel.open {
  height: auto;
  opacity: 1;
}

// ❌ Wenig hilfreich – was ist das genau?
console.log(buttons);
 
// ✅ Mit Label – sofort lesbar
console.log('buttons:', buttons);
console.log('Anzahl gefundene Buttons:', buttons.length);
 
 
// ✅ Fehler bewusst kennzeichnen (erscheint rot in der Console)
console.error('Kein Element gefunden für Selector:', selector);

// ❌ Fehler: 'e' wurde im Callback nicht deklariert
buttons.forEach((button) => {
  button.addEventListener('click', () => {   // ← 'e' fehlt als Parameter
    const panelElement = e.target.nextElementSibling;
    // ...
  });
});

Was passiert:

• Read: Console zeigt Uncaught ReferenceError: e is not defined
• Reproduce: Jedes Mal beim Klick auf einen Button
• Reduce: Das Problem liegt in Zeile mit e.target – e ist nirgends definiert
• Fix: Den Parameter e in der Klammer (e) ergänzen

// ✅ Korrekt: 'e' als Parameter deklariert
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {  // ← 'e' als Parameter
    const panelElement = e.target.nextElementSibling;
    // ...
  });
});

// ❌ Wählt nur den ersten Button – forEach funktioniert, aber nur 1 Element reagiert
const buttons = document.querySelector('.accordion-btn');
 
// ✅ Wählt alle Buttons
const buttons = document.querySelectorAll('.accordion-btn');

// ❌ Sucht nach einem HTML-Tag <accordion-btn> – findet nichts, gibt leere NodeList zurück
const buttons = document.querySelectorAll('accordion-btn');
 
// ✅ Punkt vor Klassennamen nicht vergessen
const buttons = document.querySelectorAll('.accordion-btn');

console.log('Gefundene Buttons:', buttons.length); // → 0 zeigt das Problem

// ❌ Aussen heisst die Variable 'button' (singular) – innen im forEach auch 'button'
// → der äussere 'button' wird überschrieben, setAttribute betrifft immer den letzten
button.forEach((button) => {
  button.addEventListener('click', (e) => {
    // ...
    if (!panelIsOpen) {
      panelElement.classList.add('open');
      button.setAttribute('aria-expanded', 'true'); // ← welches 'button' ist das jetzt?
    }
  });
});
 
// ✅ Klare, unterschiedliche Namen
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    // ...
    if (!panelIsOpen) {
      panelElement.classList.add('open');
      button.setAttribute('aria-expanded', 'true'); // ← eindeutig: der geklickte Button
    }
  });
});

// ❌ classList.add('open') steht doppelt – einmal ausserhalb, einmal im if-Block
// → Panel wird immer geöffnet, nie geschlossen
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const panelElement = e.target.nextElementSibling;
    const panelIsOpen = panelElement.classList.contains('open');
 
    buttons.forEach((andererButton) => {
      andererButton.nextElementSibling.classList.remove('open');
      andererButton.setAttribute('aria-expanded', 'false');
    });
 
    panelElement.classList.add('open'); // ← diese Zeile wurde vergessen zu löschen
 
    if (!panelIsOpen) {
      panelElement.classList.add('open');
      button.setAttribute('aria-expanded', 'true');
    }
  });
});
 
// ✅ Nur innerhalb des if-Blocks
buttons.forEach((button) => {
  button.addEventListener('click', (e) => {
    const panelElement = e.target.nextElementSibling;
    const panelIsOpen = panelElement.classList.contains('open');
 
    buttons.forEach((andererButton) => {
      andererButton.nextElementSibling.classList.remove('open');
      andererButton.setAttribute('aria-expanded', 'false');
    });
 
    if (!panelIsOpen) {
      panelElement.classList.add('open');
      button.setAttribute('aria-expanded', 'true');
    }
  });
});

// ❌ Syntaxfehler: '(' fehlt vor 'andererButton'
// → Console: Uncaught SyntaxError: Unexpected token '=>'
buttons.forEach(andererButton) => {
  andererButton.nextElementSibling.classList.remove('open');
});
 
// ✅ Korrekt
buttons.forEach((andererButton) => {
  andererButton.nextElementSibling.classList.remove('open');
});

<!-- ❌ Script im <head> – HTML ist noch nicht geladen wenn JS läuft -->
<!-- → document.querySelectorAll('.accordion-btn') gibt null zurück -->
<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>  <!-- zu früh! -->
</head>
<body>
  <button class="accordion-btn">Frage 1</button>
</body>
</html>
 
<!-- ✅ Script am Ende von <body> – HTML ist vollständig geladen -->
<!DOCTYPE html>
<html>
<head>
  <link href="style.css" rel="stylesheet">
</head>
<body>
  <button class="accordion-btn">Frage 1</button>
 
  <script src="script.js"></script>  <!-- ← hier -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
  <link href="style" rel="stylesheet">
</head>
<body>
  <div class="accordion">
    <button class="accordion-btn">Frage 1</button>
    <div class="panel">Antwort 1</div>
    <button class="accordion-btn">Frage 2</button>
    <div class="panel">Antwort 2</div>
  </div>
</body>
</html>

const buttons = document.querySelectorAll('accordion-btn');
 
buttons.forEach((button) => {
  button.addEventListener('click', () => {
    const panelElement = e.target.nextElementSibling;
    panelElement.classList.toggle('open');
  });
});