Warum ist das length-Attribut hier null?

Code:

function addListeners() {
    var fields = document.getElementsByClassName("solutionField");
    console.log(fields);
    console.log(fields.length);
    for (var i = 0; i < fields.length; i++) {
        fields[i].addEventListener("transitionend", toggleBorder);
        console.log("added");
    }
}

Die Console-Logs:

Bild zum Beitrag

Die Collection hat zwei Items, also warum ist length = 0 wenn ich versuche es auszulesen, obwohl es hier eigentlich 2 sein sollte?

3 Antworten

coolerspecht342

22.02.2024, 21:34

Wann wird der Code ausgeführt? Evtl. ist die Seite zu dem Zeitpunkt nicht geladen

Twitchers04

Fragesteller

22.02.2024, 21:35

Ich habe in der HTML-Datei das Script-Tag im Head.

Edit:

Ok...das war das Problem, wenn ich das Script-Tag am ende hintue funktioniert es

coolerspecht342

22.02.2024, 21:37

@Twitchers04

Dann wird das ausgeführt bevor es vollst. geladen hat. Ne "unsaubere" Lösung ists den script tag kurz bevor du body schließt einzufügen

FaTech

23.02.2024, 00:00

@Twitchers04

Ich finde Scripte im body schrecklich. Meiner Meinung nach gehören die in den head. Schließlich ist das der Bereich, wo man sowas definiert. Deshalb kann ich das defer attribute empfehlen. Dann funktioniert es auch im head

dervieux

23.02.2024, 04:31

@FaTech

Google sagt etwas anderes;

"For scripts that are critical to the page contents and should be loaded first such as analytics, API, or authentication-type of scripts, it is recommended to place them in the head section of the HTML page. And other script tags should be placed at the bottom of the page before the closing </body> tag. "

FaTech

23.02.2024, 05:07

@dervieux

Naja, Google kann sagen was es will. Google holt es aus eine Quelle und man weiß jetzt nicht woher. Das defer attribute wurde ja auch nicht umsonst eingeführt

Erzesel

23.02.2024, 07:39

@FaTech

...oder man lässt eine "Main"-Funktion per:

<body onload="myFunction()">

...aufrufen. Das onload -Event wird getriggert, wenn die Seite vollständig geladen ist. Damit wäre absolut sichergestellt, dass , egal wo irgendwas "verstreut" ist , auch bereits vorhanden ist.

Keine Frage, "irgendwo verstreut" ist kein guter Programierstil , aber ich habe schon "Pferde vor der Apotheke...🤮" . Besonders wenn copy&paste das Zepter schwangen.

https://www.w3schools.com/tags/ev_onload.asp

...und natürlich gibt's auch Situationen, wo Aktionen laufen sollen, bevor eine Aktion ausgeführt wird: https://www.w3schools.com/tags/ref_eventattributes.asp .

...Das lässt sich nicht immer über die Position des Script-Tag im HTML steuern.🤔

Auch C# usw. haben ähnliche Events, welche (normalerweise) nicht explizit behandelt werden.

Im Falle von Html/JavaScript ist es nunmal so herum, dass DOM und (JavaScript) programm zwei verschiedene "Schuhe" sind und das Script nur mit dem arbeiten kann, was bereits vorhanden ist.

...aber auch in anderen Sprachen baust Du das GUI auf, bevor Du am Ende die Main-Funktion aufrufst... Nur das der Ablauf da nicht so augenfällig ist, weil der Compiler die Reihenfolge optimiert.

(auch bei WPF/Maui/Qt/... wird die GUIdefinition abgearbeitet, bevor der Programmcode ( main() ) ausgeführt wird.)

Erzesel

23.02.2024, 07:55

@FaTech

Naja, Google kann....

Er hat schon irgendwie Recht, es gibt ne Menge Zeug, das ausgeführt werden könnte/sollte, bevor man mit dem Laden der Seite fertig ist. Allerdings wäre es aus meiner Sicht Schwachsinn mit mehreren Scripttags zu arbeiten... und defer ist auch kein Allheilmittel.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

23.02.2024, 16:20

Es gibt da mehrere Probleme die auftreten können. Deswegen habe ich eine eigene Variante für dich gebastelt:

function addListeners() {
    document.addEventListener("DOMContentLoaded", ()=>{
        let fields = document.querySelector(".solutionField");
        console.log(fields);
        console.log(fields.length);   
        fields.forEach(element => {
            element.addEventListener("transitionend", toggleBorder);        
        });
        console.log("added");
    });    
}

Es können Probleme auftreten wenn das DOM nicht geladen wurde bzw. nicht die gesuchten Elemente.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Gamer4214

23.02.2024, 00:35

Eventuell ein Fehler in der Ausgabe Zeile.

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

XHR nutzt GET anstatt POST?

Mit folgendem code versuche ich zweck logins auf meinen Server zuzugreifen

var r = new XMLHttpRequest();

r.open("POST", "/user/login", true);
r.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

r.onreadystatechange = function () {

    if (r.readyState != 4 || r.status != 200) return;

    console.log(r.responseText);
            
    if (r.responseText == '?incorrect') {

        console.log('wrong password');

    }
    else if (r.responseText == 'correct') window.location.replace('/user/');

};

r.send('pwd=' + document.querySelector('#pwd-input').value);

Wenn ich den Code ausführe, steht in der Console der Seitenquelltext als Ergebnis. Der Server (Express) registriert eine GET request und auch im Netzwerktab von Chrome wird die request Methode mit GET angegeben. Hat jemand eine Idee warum und was ich versuchen könnte, außer Alternativen zur XHR zu nutzen?

...zur Frage

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zur Frage

Node.js: Werte an HTML Datei übergeben?

Ich habe etwas mit Node.js angefangen und komme einfach nicht mehr weiter. Ich habe das Server erstellen usw. gut verstanden, aber jetzt komme ich nicht mehr weiter. Es kann sein, dass das total einfach ist.

Ich habe anfangs einen Server erstellt. Nun habe ich eine MySQL-Verbindung hergestellt (was auch funktioniert) und mit dem SELECT-Befehl Daten daraus bekommen. Nur stellt sich mir nun einfach die Frage, wie zum Teufel ich den Wert in meine HTML Datei bekomme, um sie auszugeben.

app.js:

var express = require("express");
var app = express();
var mysql = require("mysql");
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to Database!");
});

app.listen(8080, function() {
  console.log("Server is running!");
});

con.query("SELECT id, Zahl FROM test", function(err, result, fields) {
  if (err) throw err;
  console.log(result);
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

Also, wie gesagt, bekomme ich in der Konsole "result" ausgegeben. Aber wie bekomme ich das jetzt z.B. in einen div in meiner index.html?

Und noch eine kleine Nebenfrage: Ist das so richtig, wenn ich einfach andere Seiten so

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.get("/test", function(req, res) {
  res.sendFile(__dirname + "/test.html");
});

erzeugen kann?

Also wenn ich einfach nur mehrere HTML Dateien haben möchte.

Und noch eine kleine Frage: Ich kenne es so, dass man in PHP eigentlich immer MySQL-Datenbanken verwendet. In Node.js geht das ja auch, aber gibt es da auch eine Art vorgesehene Datenbank?

Die kleinen Fragen sind nebensächlich, die erste Frage ist mir erst einmal am wichtigsten. Aber wer es weiß ...

MfG

Tom

...zur Frage

NodeJS Variable aus Function bekommen?

Ich weiß gerade echt nicht wonach ich suchen soll.

var databasePassword;
bcrypt.hash(passwort, 10, function(err, hash){
  if(err) {console.log("HASH ERROR");throw err;}
  console.log(hash);
  databasePassword = hash;
  console.log("databasePassword:"+databasePassword);
});
console.log(databasePassword);

Es wird Problemlos:

console.log(hash);
console.log("databasePassword:"+databasePassword);

ausgegeben. Nur bekomme ich das ganze nicht außerhalb der Funktion ausgegeben.

Er sagt dann einfach "undefined".

Woran liegt das? Ich habe die Variable ja davor Global gesetzt. Oder nicht?

Danke im Voraus!

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

Javascript funktion um gewisse Uhrzeit, setinterval Ressourcen Belastung?

Hallo zusammen

Ich bräuchte eine function, welche immer um die gleiche Uhrzeit, jeden Tags ausgeführt wird. Jeden Tag um 23:59

Nun habe ich eine setInterval function welche jede sekunde ausgeführt wird. wenn die aktuelle uhrzeit 23:59:0 betrifft, wird die eigentliche function ausgeführt.

Meine Frage: Ist das sehr ressourcen verbrauchend, da jede sekunde abgefragt wird?

function tick() {
  //get the mins of the current time
  var mins = new Date().getMinutes();
  var sec = new Date().getSeconds();
  var hours = new Date().getHours();
  var time_stamp = "23:59:0";
  var time_stamp = "15:20:0";
  var current_time = hours + ":" + mins + ":" + sec;
  
  if (current_time == time_stamp) {
    alert('Do stuff');
  }
  console.log('Tick ' + hours + ":" + mins + ":" + sec);
}


setInterval(tick, 1000);

...zur Frage

Javascript Leerzeile nach pTag einfügen?

Hi,

ich möchte nach einem pTag, wenn das nächste GeschwisterElement nicht auch ein pTag ist, eine Leerzeile einfügen. Leider schein bei der If Abfrage iwas nicht zu stimmen. Er führt den Befehl immer aus obwohl das nächste Element ein pTag ist. Sieht jemand meinen Fehler?

function leerzeile() {

var plength = document.getElementsByTagName("p").length;

for (let i = 0; i < plength; i++) {

var p = document.getElementsByTagName("p")[i];

p.classList.add("pclass");

}

var pclass = document.getElementsByClassName("pclass").length;

for (let i = 0; i < pclass; i++) {

var ptag = document.createElement("p");

ptag.innerHTML = "&nbsp";

var vorhandenesObjekt = document.getElementsByClassName("pclass")[i];

var nextElement = vorhandenesObjekt.nextSibling;

if (nextElement.tagName != "p" ) {

vorhandenesObjekt.appendChild(ptag);

vorhandenesObjekt.style.margin = "0";

}

leerzeile();

...zur Frage

Node js Mailer?

Hab das ausprobiert emails zu versend mit Text aber wie kann ich dazu noch eine jpg/png datei hinzufügen die im selben ordner ist.

Zum beispiel unter dem

text: 'That was easy!',

Image: path: "bild.jpg"


var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'youremail@gmail.com',
    pass: 'yourpassword'
  }
});

var mailOptions = {
  from: 'youremail@gmail.com',
  to: 'myfriend@yahoo.com',
  subject: 'Sending Email using Node.js',
  text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
  if (error) {
    console.log(error);
  } else {
    console.log('Email sent: ' + info.response);
  }
});

Der code ist ein beispiel von https://www.w3schools.com/nodejs/nodejs_email.asp

...zur Frage

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zur Frage

Node.js: Wie kann ich den push-Fehler verhindern?

Code:

function file_tree(dir1, files1) {
 const filesArray = fs.readdirSync(dir).filter(file => fs.lstatSync(dir+file))
 for (let i = 0; i < filesArray.length; i++) {
  
 // Use stat() method
 fs.stat(dir+filesArray[i], (err, stats) => {
  if (!err) {
   if (stats.isDirectory()) {
    dir1.push(filesArray[i]);
   }
   else if (stats.isFile()) {
    files1.push(filesArray[i]);
    
   }
 }
 else
   throw err;
});
}
console.log(files1)
return dir1, files1
}
var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();
dir, files = file_tree(dir1, files1)
console.log(dir)
console.log(files);

Ausgabe:

undefined
[]
[]
    files1.push(filesArray[i]);
        ^
TypeError: Cannot read properties of undefined (reading 'push')
  at <dir>.js:32:16
  at FSReqCallback.oncomplete (node:fs:201:5)
Node.js v20.5.1

Frage:

Wie kann ich den push-Fehler verhindern?

Ich habe es so versucht, doch:

var dir1 = new Array();
var files1 = new Array();
dir1[n] = new Array();
files1[n] = new Array();

...zur Frage

JavaScript interval mehrmals aufrufen?

Hallo, ich habe das Problem, dass ich ein Interval mehrmals aufrufen möchte.

Jedoch kann ich immer nur eines abbrechen.

Ich hätte das Abbrechen so versucht:

clearInterval(interval + thema);

Funktioniert leider nicht.

                var zahl = 0;
                var intervalphp = setInterval(erhoeheZahl, 100, 90, 'php');
                var intervalcss = setInterval(erhoeheZahl, 100, 100, 'css');


                function erhoeheZahl(max, kreis, thema) {
                    zahl++;
                    console.log(zahl);
                    document.getElementById(kreis).innerHTML = zahl;
                    document.getElementById(kreis + 'kreis').style.background = `conic-gradient(#712e1e ${zahl * 3.6}deg, #ffd5af 0deg)`;


                    if (zahl >= max) {
                        clearInterval(interval + thema);
                    }
                }

Danke im voraus!

...zur Frage

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Hallo,

ich versuche mit JavaScript Daten über ein Servlet aus der Datenbank zu holen. In folgende Zeile bekomme ich die Fehlermeldung aus dem Titel:

var katHoler = JSON.parse(xmlhttp.responseText);

Ich habe gelesen, dass meine Funktion eine JSON erwartet. Aber ich habe nur Lösungen mit Libraries wie jQuery gefunden. Die darf ich aber von meinem Professor aus nicht benutzen.

function pupulateDropDown() {
  var servletURL = "./KategorienHolen"
  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      var katHoler = JSON.parse(xmlhttp.responseText);
      JSON.stringify(katHoler);
      
      var ausgabe = "<a href=" + "DisplayKlamotten" + "?=" + katHoler.kategorie + ">" + katHoler.kategorie + "</a>";

      document.getElementsByClassName("innerDiv").innerHTML = ausgabe;
      console.log(xmlhttp.responseText);
      console.log(katHoler.kategorie);
      console.log(katHoler.id);
    }
  }

  xmlhttp.open("GET", servletURL, true);
  xmlhttp.send();
}

...zur Frage

Javascript setTimeout Wiederholungen?

Schaut mal bitte folgendes Beispiel

var update=0;
function ReloadFunktionen()
{
 console.log(update);
 update=setTimeout(ReloadFunktionen, 1000);
}
ReloadFunktionen();

Die console.log Info zeigt mir das der Wert der Variable "update" am steigen ist, die Zahl wird immer groeser, ich frage mich ob dadurch mit der Zeit vielleicht der Browser immer mehr Speicher verbraucht, ob ich das falsch aufgebaut habe oder ob das normal ist das die Zahl welche setTimeout zurueck gibt immer weiter steigt.

Im Prinzip will ich das ganze als Endlosschleife benutzen damit bestimmte Funktionen immer wieder neu aufgerufen werden nach Ablauf von paar Sekunden.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen