JS Fehlermeldung Hilfe: null is not an object evaluating…?

1 Antwort

Mirko Marek
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Mediengestalter Digital und Print
05.02.2025, 13:35

Hallo ArneH22,

ich glaube das der Fehler sein könnte dass das Skript zuerst im DOM geladen wird und dann die HTML-Elemente. Daher solltest du sicher gehen das alles geladen wurde. Das kannst du mit einem Event Listener durchführen. Hier mein Codevorschlag:

// Innerhalb des Event Listener werden der Code nur ausgeführt, wenn das DOM fertig geladen wurde
document.addEventListener('DOMContentLoaded', function() {
    //Javascript
    var input1 = document.getElementById("input1");
    var input2 = document.getElementById("input2");
    var btn = document.getElementById("btn");
    var erw_input = document.getElementById("erw-input");
    var erw_input2 = document.getElementById("erw-input2");
    var volumen_out = document.getElementById("volumen-out");
    var volumen_out2 = document.getElementById("volumen_out2");



    const koerper = ["zylinder", "kegel", "kugel", "würfel", "quader", "pyramide"];



    var foundInput1 = koerper.includes(input1.value.toLowerCase());


    btn.addEventListener("click", function() {
    if (koerper.includes(input1.value.toLowerCase())) {
        for (var i1 = 0; i1 < koerper.length; i1++) {
        if (koerper[i1] == input1.value.toLowerCase()) {
            if (koerper[i1] == koerper[0]) {
            zylinder();
            }
            if (koerper[i1] == koerper[1]) {
            kegel();
            }
            if (koerper[i1] == koerper[2]) {
            kugel();
            }
            if (koerper[i1] == koerper[3]) {
            wuerfel();
            }
            if (koerper[i1] == koerper[4]) {
            quader();
            }
            if (koerper[i1] == koerper[5]) {
            pyramide();
            }
        }
        }
    } else {
        console.log("falsch");
    }


    if (koerper.includes(input2.value.toLowerCase())) {
        for (var i2 = 0; i2 < koerper.length; i2++) {
        if (koerper[i2] == input2.value.toLowerCase()) {
            if (koerper[i2] == koerper[0]) {
            zylinderZwei();
            }
            if (koerper[i2] == koerper[1]) {
            kegelZwei();
            }
            if (koerper[i2] == koerper[2]) {
            kugelZwei();
            }
            if (koerper[i2] == koerper[3]) {
            wuerfelZwei();
            }
            if (koerper[i2] == koerper[4]) {
            quaderZwei();
            }
            if (koerper[i2] == koerper[5]) {
            pyramideZwei();
            }
        }
        }
    } else {
        console.log("falsch");
    }
    
    });



    function kugel() {
    erw_input.innerHTML = "<h4>Radius 1:</h4> " + "<input required type='text' placeholder='Radius Kugel' id='rKug'>"
    }


    function kugelZwei() {
    erw_input2.innerHTML = "<h4>Radius 2:</h4> " + "<input required type='text' placeholder='Radius Kugel' id='rKug2'>";
    }



    if (input1.value.toLowerCase() == koerper[2]) {
        var erg_kug = 4 / 3 * Math.PI * Math.pow(rKug.value, 3);
        volumen_out.innerHTML = "Volumen 1 - Kugel: <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; r&#179; <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; " + rKug.value + "&#179; <br>" + "V = " + erg_kug.toFixed(2) + " cm&#179";
    }


        if (input2.value.toLowerCase() == koerper[2]) {
        var erg_kug2 = 4 / 3 * Math.PI * Math.pow(rKug2.value, 3);
        volumen_out2.innerHTML = "Volumen 2 - Kugel: <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; r&#179; <br>" + "V = 4 &#247; 3 &#183; &#960; &#183; " + rKug2.value + "&#179; <br>" + "V = " + erg_kug2.toFixed(2) + " cm&#179";
        }
    // ...
});

Da der Code nicht vollständig ist, kann ich ersteinmal nur diesen Fehler sehen.

Switch Case anstatt viele If-Abfragen

Wie ich gesehen habe, stellst du in deinem Code viele If-Abfragen mit der gleichen Variable ab. Das kannst du lösen indem du switch case aus JavaScript verwendest dafür habe ich dir ein Beispielcode geschrieben:

switch (koerper[i1]) {
    case "zylinder":
        zylinder();
        break;
    case "kegel":
        kegel();
        break;
    case "kugel":
        kugel();
        break;
    case "würfel":
        wuerfel();
        break;
    case "quader":
        quader();
        break;
    case "pyramide":
        pyramide();
        break;
    default:
        console.log("Unbekannter Körper");
}

Ich würde dir empfehlen viele weitere Verbesserungen zu machen. Die Switch Case Abfrage könntest du eine eine Funktion packen und dann gleich alle anderen Funktionen weg sparen. Damit sparst du dir Code, Nerven und Zeit. Dazu erhälst du eine bessere Übersicht.

let statt var - Variablen in JavaScript

Zwar wird var weiterhin von JavaScript unterstützt und es funktioniert, aber in modernen JavaScript-Anwendungen sollte man auf let zurück greifen. Das liegt mit dem Scope der Variablen zurück und kann zu Problemen führen und zu Belegung von unnötigen Speicher. Daher ist bevorzugte Variante mit let zu gestalten.

Ich habe mir etwas die Mühe gemacht und habe ein bischen dein Code aufgeräumt:

document.addEventListener("DOMContentLoaded", () => {
    const input1 = document.getElementById("input1");
    const input2 = document.getElementById("input2");
    const btn = document.getElementById("btn");
    const erw_input1 = document.getElementById("erw-input");
    const erw_input2 = document.getElementById("erw-input2");
    const volumen_out1 = document.getElementById("volumen-out");
    const volumen_out2 = document.getElementById("volumen-out2");


    const koerper = {
        "zylinder": zylinder,
        "kegel": kegel,
        "kugel": kugel,
        "würfel": wuerfel,
        "quader": quader,
        "pyramide": pyramide
    };


    btn.addEventListener("click", () => {
        berechneVolumen(input1.value.toLowerCase(), erw_input1, volumen_out1);
        berechneVolumen(input2.value.toLowerCase(), erw_input2, volumen_out2);
    });


    function berechneVolumen(typ, inputContainer, outputContainer) {
        if (!(typ in koerper)) return;


        inputContainer.innerHTML = "";
        const label = document.createElement("h4");
        label.textContent = `Radius (${typ}):`;


        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = `Radius ${typ}`;
        input.id = `r-${typ}`;


        const button = document.createElement("button");
        button.textContent = "Berechnen";
        button.addEventListener("click", () => rechneAus(typ, input, outputContainer));


        inputContainer.appendChild(label);
        inputContainer.appendChild(input);
        inputContainer.appendChild(button);
    }


    function rechneAus(typ, input, outputContainer) {
        const wert = parseFloat(input.value);
        if (isNaN(wert)) return;


        let ergebnis = 0;
        switch (typ) {
            case "kugel":
                ergebnis = (4 / 3) * Math.PI * Math.pow(wert, 3);
                break;
            case "zylinder":
                ergebnis = Math.PI * Math.pow(wert, 2) * 10;
                break;
            case "kegel":
                ergebnis = (1 / 3) * Math.PI * Math.pow(wert, 2) * 10;
                break;
            case "würfel":
                ergebnis = Math.pow(wert, 3);
                break;
            case "quader":
                ergebnis = wert * wert * 10;
                break;
            case "pyramide":
                ergebnis = (1 / 3) * wert * wert * 10;
                break;
        }


        outputContainer.innerHTML = `Volumen von ${typ}: ${ergebnis.toFixed(2)} cm³`;
    }
});

Hier verwenden wir anstatt ein Array ein Objekt und ich habe Template Literals bzw. Template Strings verwendet um Textinhalt in Elementen hinzuzufügen. Damit lassen sich Berechnungen bzw. Variablen in den Texten mit integrieren. Die Textauszeichnung / Template Literals sehen so aus:

let variable1 = 15;
let variable2 = 5;
console.log(`Der erste Wert ist ${variable1} und der zweite Werte ist ${variable2} und beide Werte addiert ergeben ${variable1 + variable2}`);

Template Literals sind eine moderne Syntax in JavaScript, die durch Backticks (``) statt Anführungszeichen** ('oder") verwendet wird. Variablen oder Ausdrücke werden mit **${}` (Template Expression) eingefügt. Damit kann man viel besser arbeiten.

Viel Erfolg mit deinem Skript-Projekt
Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)