Add EventListener klappt nicht?

Hey ich weiß nicht genau was ich falsch gemacht habe das sind meine ersten Zeilen Javascript aber irgendwie kriegt mein wrapper nicht die klasse active :/

Das ist jetzt auch das erste mal, das ich mein html und css mit js verbinde bzw. das erste man js an einer seite anwende vielleicht ist mir dabei ein fehler unterlaufen ich weiß es nicht hat jemand einen tipp ??? :)

Bild zum Beitrag

2 Antworten

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Webentwicklung

15.11.2023, 23:52

Ohne dein HTML und den ganzen Code kann man hier nur raten. Vermutlich bindest du dein Javascript schon im HEAD ein und dein DOM mit den selektierteren Elementen existiert an dieser Stelle noch gar nicht.

Entweder du bindet das Script am Ende vom BODY ein oder du wartest darauf, dass der DOM fertig aufgebaut ist:

document.addEventListener("DOMContentLoaded", () => {
  const wrapper = document.querySelector('.wrapper');
  …
});

Außerdem scheinst du schon vorher mal wrapper definiert haben. Das solltest du überprüfen, da du eine Konstante nicht neu definieren kannst.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Rabgr

15.11.2023, 22:49

Öffne bei deinem Browser die Dev Tools und dann geh auf Konsole und schaue, ob da irgendwelche Errors angezeigt werden.

Hast du daran gedacht die Datei in die HTML zu verlinken.

<script src="login.js"></script>

Rike456

Fragesteller

15.11.2023, 22:53

jap habe ich gemacht

Rabgr

15.11.2023, 22:53

@Rike456

Und das mit den Dev Tools.

Rike456

Fragesteller

15.11.2023, 23:01

@Rabgr

wenn ich bei den dev tools auf den wrapper gehe steht dort nur div.wrapper anstatt div.wrapper.active wenn du das meinst

Rabgr

15.11.2023, 23:02

@Rike456

Ich meinte bei der Konsole.

Rike456

Fragesteller

15.11.2023, 23:05

@Rabgr

oh sorry wie gesagt is das erste mal das ich sowas mache bei der konsole stehen tatsächlich zwei fehler:

VM2058 login.js:5 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

at VM2058 login.js:5:14

Rabgr

15.11.2023, 23:10

@Rike456

Beim ersten heißt es das der QuerySelector die Klasse nicht gefunden hat und beim zweiten hast du ein a Element nicht als eine variable definiert.

Hier eine überarbeitet Version die den zweiten Fehler beheben soll.

var wrapper = document.querySelector('.wrapper')

Rike456

Fragesteller

15.11.2023, 23:17

@Rabgr

ich danke dir für deine hilfe ich versuche mal den ersten fehler zu beheben :)) Vielen vielen dank

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

Wann bin ich fertig mit HTML und CSS?

Hallo,

Ich lerne schon seit einiger Zeit HTML und CSS, und habe schon einige etwas größere websiten erstellt (also die grafische Oberfläche). Ich wollte auch bald mit Javascript anfangen, aber man sollte ja erst mit einer anderen Sprache anfangen, wenn mann die erste gut kann, aber ich weiß nicht wann ich bereit bin.

Meine Frage: Was muss ich alles in HTML und CSS können, um mit Javascript anzufangen?

Danke:)

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

Was ist euer JS Lieblingsframework?

...zur Frage

Frontend Entwickler Werkstudent Fragen?

Mir macht das programmieren von Websites spaß. Ich studiere gerade Medieninformatik und will mehr in die Web-Entwicklung mich vertiefen. und später fullstack arbeiten sprich frontend und backend.

Was verdient ein Frontend Enwickler, Was verdient ein Backend Enwickler? Bekommt man dann zb weniger Gehalt als ein zb. Softwareentwickler?
Ich lerne gerade noch viel mit html css und javascript zu programmieren. Hab noch nie mit Framworks gearbeitet und kenne mich da auch noch nicht so gut aus. Kann mir wer darüber was sagen was frameworks sind und wozu man diese braucht?
will als Werkstudent Frontend-Entwickler mich bewerben. Kann mir, darüber jemand erzählen, was man so für aufgaben bekommt? reicht es fürs erste wenn ich mich auf html css und javascript fokussiere? Was sollte ich noch lernen wenn ich als Werkstudent arbeiten will?

sind vllt viele Fragen, aber ich wäre sehr dankbar über eine Anwort=).

...zur Frage

WordPress mit eigenem HTML, CSS und JSCode?

Hallo Leute, ich brauche mal ein paar Infos zu WordPress in Verbindung mit eigenem HTML, CSS und JavaScript Code.

1.) Ich habe mit den 3 besagten Sprachen ein kleines interaktives Bild in einer HTML Datei erstellt mit einem Umfang von gut 180 Zeilen und dieses Bild würde ich gerne in WordPress einbinden, funktioniert das? Wenn ja wie? Per Shortcode? Direkt einbinden? muss ich das in ein Plugin umwandeln?

2.) Wenn es möglich ist, kann ich das Erstellte leicht exportieren und auf einer anderen WordPress Seite ebenfalls leicht Importieren?

3.) Kann ich überhaupt mit der kostenlosen Version bzw. mit der Persönlichen oder maximal Premium Version besagtes umsetzen? Oder müsste ich für eigenen Code ein höheren Tarif wählen?

Vielen dank schonmal und Beste Grüße!

...zur Frage

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

Navigation Bar in Html überdeckt zeilen-Wie kann ich das Beheben?

Hi Leute, Ich habe neulich eine navigation bar in Html css und javascript Programmiert. Jetzt habe ich aber das Problem, dass diese Navigation bar (Fixed on the top) Die ersten paar Zeilen, die ich schreibe überdeckt. Wenn ich in meinem

mit

die ersten paar Zeilen schreibe, werden diese von der Navigation bar überdeckt. Wenn ich aber einfach nur den Tag

schreibe, dann ist die navigation bar nicht mehr ganz oben sondern etwas nach unten verschoben. Das will ich auch nicht (: Was kann ich machen?

...zur Frage

HTML CSS JS Android App - Macht das Sinn?

Hallo Zusammen,

ich entwickle aktuell eine kleine App in Android Studio mit Java, die ist bald fertig. Ich kann auch HTML CSS und Javascript und stelle mir jetzt die Frage ob es Sinn macht, eine App mit JS zu entwickeln. Das sowas geht habe ich schon gelesen, aber gibt es da irgendwelche Haken, wei z.B. längere Laufzeit, etc...?

...zur Frage

HTML Kalender ohne JavaScript oder PHP erstellen?

Hallo zusammen,

ich möchte mit HTML einen Kalender erstellen, der allerdings nicht statisch sein soll. Damit meine ich nicht unbedingt, dass jeder manuell auf der Webseite Daten eintragen kann, sondern dass man zwischen den Monaten navigieren kann. Zum Beispiel innerhalb einer Zeitspanne von August 2022 bis August 2025 oder so. Dabei soll der Kalender beim Aufrufen der Seite, wenn möglich, den aktuellen Monat zeigen und durch Klicken auf ein Symbol (oder eventuell Drücken der Links- / Rechtstaste auf der Tastatur) kann man auf den vorherigen oder nächsten Monat wechseln.

Ich möchte das - verständlicherweise - nicht durch das Erstellen von 37 verschiedenen HTML-Dokumenten erreichen, durch die man dann mit Hyperlinks zwischen diesen Seiten hin und herwechseln kann.

Das Problem ist, dass ich sowohl von JavaScript als auch von PHP absolut keine Ahnung habe und auf keinen Fall irgendwo im Internet einen fünfzig-Zeilen-Code (JavaScript, PHP oder sonst irgendeine Programmiersprache) kopieren will, den ich zu 99,9% selbst nicht verstehen würde.

Weiß einer, wie ich so etwas nur mit HTML und CSS (und eventuell, wenn es sein muss, auch mit Java) hinbekomme?

P. S. Bitte gebt mir keine Antworten vom Stil "lerne einfach JavaScript". Das ist keine hilfreiche Antwort, da ich es eben ohne JavaScript erreichen will!

...zur Frage

javascript und css kombinieren?

Ich will eine Stecknadel an der stelle setzen lassen wo man klickt weiß aber nicht wie ich meine x und y variablen in css einsetzen kann, oder gibt es einen weg css in js zu benutzen?

...zur Frage

Geteilte Einkaufsliste JS?

Also ich will eine Geteilte Einkaufsliste machen wo wenn einer etwas hinzufügt es bei allen anderen auch hinzugefügt wird und dasselbe auch beim Löschen. Leider weiß ich nicht wie eine JS Datenbank geht und finde kein Deutsches Tutorial.

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen