Div-Element mit javascript auslesen; wird eine Zahl als Zahl angesehen?

var x = document.getELementById("div-ID");

var y = document.getELementById("div-ID2");

var z = y.valueAsNumber * z.valueAsNumber;

Hallo zusammen,

ich habe das Problem, dass das Ergebnis aus zwei Div-Elementen, die einen Zahlwert enthalten, immer wieder bei dem Start der Funktion NaN ausspucken. Ich mache das nur aus Spaß und weiß gerde nicht weiter.

Können die Werte aus Div - Elementen nicht mit document.getElementByID ausgelesen werden, um dann mit den Variabeln weiterzurechnen?

Das ist oben nur skizziert, aber gebe ich bei var z als Variabel einen Zahlwert ein, dann klappt alles. Mein probelm scheint also da zu liegen.

Answer 1

[regex9]

Die getElementById-Methode gibt dir das HTML-Element wieder. Den Inhalt erhältst du über das Property textContent (kompletter Textinhalt), innerText (sichtbarer Textinhalt) oder innerHTML (Textinhalt mitsamt HTML-Subknoten).

Vor der Verwertung in einer Rechnung solltest du Wert zudem besser parsen (entweder mit parseFloat oder parseInt). Deine Zeile mit der Multiplikation sieht zudem nicht richtig aus, sicherlich wolltest du eigentlich die Faktoren x und y nutzen.

const x = parseFloat(document.getElementById("div-ID").textContent);
const y = parseFloat(document.getElementById("div-ID2").textContent);
const z = x * y;

Was wohl ebenso eine Überlegung wert wäre: Wenn du nicht div-Elemente nutzen würdest, sondern Textfelder. Wenn die nicht bearbeitbar sein sollen, kannst du sie auch als readonly markieren.

HTML:

<input id="numberOne" readonly="readonly" value="2">
<input id="numberTwo" readonly="readonly" value="3">

In JavaScript kommst du mit value an den Feldwert:

const x = parseFloat(document.getElementById("numberOne").value);
const y = parseFloat(document.getElementById("numberTwo").value);
const z = x * y;

Comments

[BalletisFun]

Danke sehr für die Antwort, das hat mir sehr weitergeholfen. Genau wegen der Bearbeitung hatte ich div-Elemente gewählt. Das parseFloat muss ich mir dann noch einmal durchlesen im Netz, auf jeden Fall Danke ^^