Kann mir jemand sagen, was an diesem JS-Code falsch ist?

Ich bin am Verzweifeln und nicht einmal der Microsoft-Copilot kann mir helfen.

Der Fehler ist, dass ich "NaN" zurückbekomme und wenn ich diese Funktion durch einen Buttonklick aufrufe (die Funktion ist mit einem HTML-Button verbunden), kriege ich nichts zurück.

Das ist der Code:

function array_convert_to_int() {
  let userinput_1_str = userinput_1.join("");
  let userinput_1_int = parseFloat(userinput_1_str);
  return userinput_1_int;
}

let number_A = array_convert_to_int();
console.log(number_A);

verreisterNutzer

01.11.2024, 14:40

Woher liest du die Eingabe denn ein?

lukener11

Beitragsersteller

01.11.2024, 14:53

Je nachdem welchen HTML Button man klickt wird mittels push-befehlen ein anderer String hinzugefügt und die Adresse für den nächsten Wert der gespeichert werden kann +1 gerechnet.

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, Programmieren & Softwareentwicklung

01.11.2024, 21:12

Die Funktion parseFloat liefert stets den Wert NaN (Not A Number) zurück, wenn aus dem ihr empfangenen Argument keine valide Zahl herausgelesen werden kann. Das kann in deinem Fall also passieren, wenn das Array userinput_1 leer ist oder dessen Werte zusammengefügt eben keinen lesbaren Wert bieten (der Parser liest von links nach rechts und stoppt bei dem Token, welches für ihn nicht für einen numerischen Wert verwertbar ist; Beispiel: 12a => 12 oder a12 => NaN).

Von einem undefinierten Array kann man nicht ausgehen, andernfalls würdest du eine deutliche Fehlermeldung erhalten. Die Variable mit dem Array legst du demzufolge bereits vor Ausführung des geteilten Codesnippets an.

Die Fehlerursache für Fall 1 (dein obiges Codesnippet) solllte also klar sein. Die Variable number_A wird sofort bei Programmstart definiert, array_convert_to_int also auch schon aufgerufen, obwohl userinput_1 noch ohne Inhalt ist. Nutzereingaben werden erst später vom Programm aufgenommen. Bevor der Nutzer auch nur einen Klick oder Tastendruck durchgeführt hat, ist das Skript bereits fertig.

Bei einem Aufruf der Funktion via Buttonklick kommt es darauf an, was dem Array tatsächlich übergeben wird. Lasse es dir doch zur Prüfung direkt in der Browserkonsole ausgeben:

function array_convert_to_int() {
  console.log(userinput_1);
  /* ... */

lukener11

Beitragsersteller

02.11.2024, 14:49

Danke für die Hilfe. Ich konnte das Timing anpassen und jetzt funktioniert es so wie ich will.

mante1964

01.11.2024, 14:38

Ich vermute, dass das Problem daran liegt, dass du die Funktion nicht mit den erwarteten Eingabewerten aufrufst. Wenn "userinput_1" nicht definiert ist, erhältst du tatsächlich "NaN", weil die Funktion dann den Wert von "undefined" versucht zu konvertieren.

Stelle sicher, dass du "userinput_1" richtig definiert hast und dass es sich dabei um ein Array von Zahlen oder Zahl-Strings handelt, bevor du die Funktion aufrufst. Hier ein Beispiel, wie das Ganze aussehen könnte:

let userinput_1 = [1, 2, 3, 4]; // Beispiel-Array
function array_convert_to_int () {
    let userinput_1_str = userinput_1.join("");
    let userinput_1_int = parseFloat(userinput_1_str);
    return userinput_1_int;
}
let number_A = array_convert_to_int();
console.log(number_A); // Sollte jetzt 1234 ausgeben

lukener11

Beitragsersteller

01.11.2024, 15:15

"Userinput_1" sollte aber definiert sein. Weil man erst werte eingebt und dann erst mit einem Button das umwandeln aktiviert. Der Code von dir hat mit dem beispeil-Array funktioniert. Aber mit meinem Array nicht.

Ähnliche Beiträge

Java Script wie kann ich das dauerhaft wiederholen?

const cars = ["saab", "Volvo", "BMW", "Mercedes"];
async function timer() {

for (let i=0; i < cars.length; i++) {

    console.log(cars[i]);
    await sleep(2000);
}
}

timer();
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

...zum Beitrag

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.

...zum Beitrag

Wofür wird in JS/TS void benutzt?

Also, es ist soweit ich weiß eine Funktion, die nichts zurückgibt. Aber wofür gibt es so etwas? Ich meine, wenn man nichts zurückgeben will, dann benutzt man halt kein return oder nicht?

Ich bin auch kein Freund davon, so zu programmieren ohne irgendeinen bestimmten Grund, wo das Sinn machen würde.

function favNumber() {
  return 42;
}

console.log(favNumber())

Wenn das gleich drinnen steht, ist es besser.

(() => { console.log(42) })()

...zum Beitrag

Sprung vom letzten Array Element in den Ersten?

Hallo,

ich habe folgende Funktion:

function getNextWeekday(day) {
  let i = 0;
  while (i < weekdays.length) {
    if (day == weekdays[i]) {
      console.log(weekdays[i+1]) ;
      return weekdays[i+1];
    }
    i = i + 1
  }
  console.log("Error!");
  return null;
}

Wenn man getNextWeekday("Monday") eingibt, wird Tuesday ausgegeben etc. Wenn ich aber Sonntag eingebe, sollte Montag herauskommen. Weiss jemand was ich an meiner Zählervariable abändern muss, damit das funktioniert?

...zum Beitrag

Wieso funktioniert array.push() nicht?

Bei folgendem Code funktioniert die array.push-Funktion nicht.

let XArray = [];

function Xcoordinate() {
  for (let i = 0; i <= width; i+= 30) {
    XArray.push(i);
  }
}
//width ist die breite des Canvas

Das Array füllt sich nicht.

Ich arbeite mit p5.js.

Kann mir jemand helfen?

VG Finja

...zum Beitrag

JavaScript Cookie Funktioniert nicht?

function setCookie() {
  if (allowCookie) {
    let cookieData = "";
    //
    //
    cookieData = cookieData.substring(0, cookieData.length - 1);
    let today = new Date();
    today.setTime(today.getTime() + 30 * 24 * 60 * 60 * 1000);
    cookieData =
      "input=" + cookieData + "; expires=" + today.toUTCString() + "; path=/";
    document.cookie = cookieData;
    console.log(cookieData);
    console.log(document.cookie);
  }
}

Wenn ich den Code jetzt ausführe bekomme ich in der Console folgende ausgabe:

input=A.13.9.A.12.11.10.8..A.14.11.13.12.12.A.11.13.A.10.10.A.14.11.13.12..A.12.11.11.12..A.14.14.13.A.12.13.A.15.12.13.A...A.15.15.A.15.10.A...14.12.13; expires=Thu, 23 May 2024 09:06:19 GMT; path=/

wenn ich navigator.cookieEnabled auslese ist dies true. Also warum wird mein Cookie nicht abgespeichert?

...zum Beitrag

HTML/JS/CSS. Währungsrechner code von USD zu EUR?

Hallöchen 👋

Bin gaaanz neu in der Thematik programmieren, und zwar ich würde gerne bei meinem aktuell Projekt (Währungsrechner) noch die Funktion hinzufügen das man von USD zu Euro umrechnen kann.

Ich habe selbst probiert eine "Funktion" hinzuzufügen allerdings funktioniert diese wohl nicht. Wäre um Hilfe und eine kleine erklärung sehr sehr dankbar. (Benutze VS)

...zum Beitrag

PHP/Passwortvergleich: Warum kommt immer wieder eine Fehlermeldung?

Hallo!

Ich will ein Passwort, das eingegeben wird, vergleichen. Doch es kommt immer wieder diese Fehlermeldung:

Eingegebenes Passwort: n1234
admin:238 Benutzername: nadine
admin:242 Uncaught ReferenceError: form is not defined
  at validatePassword (admin:242:18)
  at HTMLButtonElement.onclick (admin:161:100)

Der Code im AdminController sieht so aus:

public function validatePassword(Request $request, $userName) {
  try {
    $password = $request->input('password');

    // Benutzer anhand des Benutzernamens finden
    $user = User::where('username', $userName)->first();

    // Debugging-Informationen in das Log schreiben
    \Log::info('Benutzername: ' . $userName);
    \Log::info('Benutzer gefunden: ' . ($user ? 'Ja' : 'Nein'));

    if (!$user) {
      return response()->json(['valid' => false, 'message' => 'Benutzer nicht gefunden']);
    }

    // Überprüfen, ob das gespeicherte Passwort im Bcrypt-Format ist
    $passwordInfo = password_get_info($user->password);
    \Log::info('Passwort-Algorithmus: ' . $passwordInfo['algoName']);

    if ($passwordInfo['algoName'] !== 'bcrypt') {
      return response()->json(['valid' => false, 'message' => 'Das gespeicherte Passwort verwendet nicht den Bcrypt-Algorithmus.']);
    }

    // Passwortüberprüfung
    $passwordCheck = Hash::check($password, $user->password);
    \Log::info('Passwort korrekt: ' . ($passwordCheck ? 'Ja' : 'Nein'));

    if ($passwordCheck) {
      return response()->json(['valid' => true]);
    }
    else {
      return response()->json(['valid' => false, 'message' => 'Ungültiges Passwort']);
    }
  }
  catch (\Exception $e) {
    \Log::error('Fehler bei der Passwortvalidierung: ' . $e->getMessage());
    return response()->json(['valid' => false, 'message' => 'Serverfehler. Bitte versuchen Sie es später erneut.'], 500);
  }
}

Und im admin blade so:

function showPasswordModal(route, userName) {
  console.log('showPasswordModal() wurde aufgerufen mit Route:', route);
  $('#passwordModal').modal('show');
  $('#passwordForm').attr('action', route); // Setze die Aktion des Passwort-Formulars auf die gewählte Route
  $('#passwordForm').data('userName', userName);
  console.log(userName);
}

function validatePassword() {
  console.log('validatePassword() wurde aufgerufen');
  var enteredPassword = document.getElementById('passwordInput').value;
  var userName = $('#passwordForm').data('userName');
  console.log('Eingegebenes Passwort:', enteredPassword);
  console.log('Benutzername:', userName);

  $.ajax({
    type: 'POST',
    url: form.action,//$('#passwordForm').attr('action'), // Stellen Sie sicher, dass dies die richtige Route ist
    data: {
      '_token': '{{ csrf_token() }}',
      'password': enteredPassword
    },
    success: function(response) {
      console.log('Server-Antwort:', response);

      if (response.valid) {
        $('#payForm').submit();
      }
      else {
        alert(response.message || 'Falsches Passwort! Bitte versuche es erneut.');
      }
    },
    error: function(xhr, status, error) {
      console.error('AJAX-Fehler:', error);
      alert('Fehler beim Validieren des Passworts. Bitte versuche es später erneut.');
    }
  });

Warum kommt immer wieder eine Fehlermeldung? Ich habe schon alles probiert und das schon seit Stunden! Danke.

...zum Beitrag

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

hinzufügen von formdata funktioniert nicht in js?

Ich möchte bilder via ajax an mein backend versenden, best practice scheint ja wohl dafür ein FromData object zu machen und dort dann die files zu appenden. Irgendwie functioniert append aber nicht:

// Fetch DOM
const saveBtn = $('#saveBtn')[0];
console.log(saveBtn);
saveBtn.addEventListener('click', saveImage);


function saveImage() {   
  const fd = makeFormData();
  console.log(fd);
  console.log('clicks'); }
  
  
  function makeFormData() {
   const title = $('#title');
   const service = $('#service');
   const colors = $('#colors');
   const logo = $('#logo').files;
   const img = $('#img').files;

   let fd = new FormData();
   fd.append('test', 'test');
  
  
   return fd; }

...zum Beitrag

JS console.log in HTML ausgeben?

Hallöchen!

Wir arbeiten gerade an einer simplen Webseite in der Schule. Dabei müssen wir sowohl HTML als auch Javascript verwenden. Nun habe ich am Ende der JS Funktion jedoch einen console.log command, welcher mir ein bestimmtes Element eines Array ausgibt. Dies ist dann auch das Endprodukt der Funktion. Wie kann ich diesen console.log command nun auf meiner Webseite ausgeben? Bzw. wie kann ich dieses Element auf meiner Webseite aus geben.

Der command:

console.log(Liste[XinOriginal)

Das Element:

"e ist der häufigste Buchstabe: " + e + " mal"

Danke für eure Hilfe!

...zum Beitrag

Addition in Javascript funktioniert nicht?

Ich versuche es zu erreichen, dass wenn ein HTML-Button gedrückt wird eine Javascript-Funktion aufgerufen wird. Diese soll die Variable Anzahl dann um 1 erhöhen. Beim 1. Mal funktioniert das auch und der voher definierte Wert (z.B. 7) erhöt sich um einen. Dann bleibt er aber bei 8.

var Anzahl = parseFloat(7);



function gedrueckt(Anzahl) {
    Anzahl += 1;
    console.log(Anzahl);
}

Wisst ihr woran das liegen könnte?

Ich hoffe auf antworten

Bohne47

...zum Beitrag

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?

...zum Beitrag

C-Knopf im Taschenrechner programmieren?

Ich habe vor, einen Taschenrechner in HTML und JS zu coden, aber ich weiß nicht, wie ich diesen Knopf, der alles löscht in eine Funktion packen kann.

So habe ich es bisher versucht, aber es funktioniert nicht:

function deleteAll() {
  let container = document.getElementById("resultarea");
  let remove = clrs(container.innerHTML);
  container.innerHTML = remove;
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen