Konvertierung von JavaScript-Strings in Zahlen in HTML: Ich suche nach Klarheit

  • JavaScript

  • hyman21
  • 8379 Aufrufe 1 Antwort

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Konvertierung von JavaScript-Strings in Zahlen in HTML: Ich suche nach Klarheit

    Ich arbeite an einem kleinen HTML- und JavaScript-Projekt und stoße auf ein Problem beim Konvertieren von Zeichenfolgen in Zahlen. Ich habe in meinem HTML-Code ein Eingabefeld, in das Benutzer eine Zahl als Zeichenfolge eingeben können. Ich verwende JavaScript, um diese Zeichenfolge in eine Zahl umzuwandeln und Berechnungen durchzuführen, erhalte jedoch nicht die erwarteten Ergebnisse.
    Hier ist mein HTML- und JavaScript-Code:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>String to Number Conversion</title>
    5. </head>
    6. <body>
    7. <input type="text" id="numberInput" placeholder="Enter a number">
    8. <button onclick="calculate()">Calculate</button>
    10. <pid="result"></p>
    12. <script>
    13. function calculate() {
    14. let input = document.getElementById("numberInput").value;
    15. let convertedNumber = Number(input);
    17. let result = convertedNumber + 10;
    18. document.getElementById("result").textContent = "Result: " + result;
    19. }
    20. </script>
    21. </body>
    22. </html>
    Alles anzeigen
    Wenn ich eine Zahl in das Eingabefeld eingebe und auf die Schaltfläche „Berechnen“ klicke, ist das Ergebnis nicht wie erwartet. Wenn ich beispielsweise „5“ eingebe, wird als Ergebnis „510“ statt „15“ angezeigt.
    Könnte jemand erklären, warum das passiert? Fehlt mir etwas in meinem Code? Wie kann ich sicherstellen, dass die Zeichenfolge korrekt in eine Zahl umgewandelt wird, bevor ich Berechnungen durchführe? Für alle Erkenntnisse oder Codeänderungen wären wir sehr dankbar. Danke schön!

  • Ich kann das nicht ganz nachvollziehen. Ich habe deinen Code eben mal in ein jsfiddle geworfen und bekomme das richtige Ergebnis. Ich persönlich würde aus dem type="text" nen type="number" machen, damit es gar nicht zu Texteingaben kommt.

    Gibt es noch mehr Code drumherum der das Ergebnis beeinflussen könnte?

    Hier das fiddle: https://jsfiddle.net/r7hqs3w9/