JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zur Frage

Das Problem liegt darin, dass du die keypressed Funktion direkt als Event-Handler an das keydown Event anhängst, statt sie als Referenz zu übergeben. Dadurch wird die Funktion sofort beim Laden der Seite ausgeführt und nicht erst, wenn das keydown Event ausgelöst wird. Daher wird die Variable activeLine auf -1 initialisiert und behält diesen Wert bei, da das click Event später ausgeführt wird und activeLine somit nicht aktualisiert wird.

Um das Problem zu beheben, musst du die keypressed Funktion als Referenz übergeben, indem du sie ohne Klammern übergibst:

addEventListener("keydown", keypressed);

Dadurch wird die Funktion als Event-Handler registriert und erst ausgeführt, wenn das keydown Event ausgelöst wird.

Außerdem solltest du sicherstellen, dass ediText definiert und initialisiert ist, bevor du versuchst, darauf zuzugreifen:

let ediText = [];

Mit diesen Änderungen sollte der Code wie erwartet funktionieren.

...zur Antwort
Weitere Inhalte können nur Nutzer sehen, die bei uns eingeloggt sind.