Frage von pixelino, 31

Könnt ihr mir bitte bei einem Javascript-Problem mit innerHTML helfen?

Auf twsc.pe.hu könnt ihr meine Scripts ansehen:

function calc() {
    //get variables from html form
    var first = document.getElementById("calculator");
    first = first["first"].value;
    var operand = document.getElementById("calculator");
    operand = operand["operand"].value;
    var second = document.getElementById("calculator");
    second = second["second"].value;
    
    switch(operand) {
        case "+":
        all = parseInt(first) + parseInt(second); 
        break;
        document.getElementById("test").innerHTML = ("The result is: " + all);
        case "-":
        all = first - second;
        document.getElementById("test").innerHTML = ("The result is: " + all);
        break;
        case "*":
        all = first * second;
        document.getElementById("test").innerHTML = ("The result is: " + all);
        break;
        case "/":
        all = first / second;
        document.getElementById("test").innerHTML = ("The result is: " + all);
        break;
        default:
        document.getElementById("test").innerHTML = ("Error! Please try again!");
        break;
    }          
}

Ein Fehler liegt im innerHTML, aber ich weiß nicht wo. Bitte helft mir.

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von regex9, 22

Zuerst einmal frage ich mich, wieso du dir jedesmal das Form-Element neu holst. Einmal reicht doch völlig:

var calculator = document.getElementById("calculator");
var first = calculator["first"].value;
// ...


Des Weiteren wird der Fall Addition im switch nicht vollständig ausgeführt, denn du brichst ja zwischendurch mit break ab.

Zu guter Letzt darfst du das Formular natürlich nicht wirklich losschicken, denn der Post-Request bewirkt die Weiterleitung auf eine neue / die gleiche Seite. Damit steht das Skript wieder am Anfang. Nimm also ein input-Element vom Typ button, statt submit.

PS.: Arbeite mehr mit Einrückungen, z.B. bei switch-case.

Kommentar von pixelino ,

1. dankee :)) 2. wie was ..das break steht am ende der case "+": 3. ok danke Könntest du das für mich fixen und wo hochladen? ... ich verstehe nicht alles ganz -> bin eher anfänger und teste darum solche sachen :D

Kommentar von regex9 ,

2. Das ist unreachable Code:

case "+":
all = parseInt(first) + parseInt(second);
break;
document.getElementById("test").innerHTML = ("The result is: " + all);


Der Programmfluss wird im Falle von + nach der Definition von all die switch-Struktur verlassen und woanders fortfahren. Dafür sorgt break. Wenn das Ergebnis jemals in den DOM eingefügt werden soll, muss die entsprechende Anweisung vor break.

3. Was genau verstehst du daran nicht?

Kommentar von Spirit528 ,

Korrekt.

Antwort
von mastema666, 11

Also was sofort auffällt ist, dass du einiges an unnötigem Code da drin hast, die Variablen aus dem Formular abfragen und zuweisen geht z.B. mit jeweils nur einem Befehl.

Die Ausgabe des Ergebnisses musst du auch nicht in jeden "case" Block packen, es reicht, wenn du dort einer Variablen das jeweilige Ergebnis zuweist und die Ausgabe dann nach dem "switch" generierst.

Was nicht zwingend notwendig ist, aber imho sehr hilfreich, ist eine Bibliothek wie jQuery (gibt auch noch andere, ich benutze halt diese) zu verwenden. Das macht nicht nur vieles einfacher, sondern es wird finde ich auch übersichtlicher, da eben insgesamt weniger Code nötig ist etc. (Soll nicht heißen, dass es, wie du es gemacht hast, falsch wäre, im Gegenteil, es ist sicher nicht verkehrt auch natives JavaScript zu beherrschen, aber man kann es sich halt auch unnötig kompliziert machen)

Auf den ersten Blick scheint das Problem, wegen dem es nicht funktioniert, jedenfalls wirklich nur das "verrutschte" break zu sein.

Da ich grad eh Langeweile habe, hab ich deinen Code mal etwas angepasst und um das entsprechende HTML erweitert (soll ja offenbar ein simpler Rechner sein wie es aussieht): http://codepen.io/anon/pen/dMxozX

Wenn ich das richtig verstanden habe, was du zu erreichen versuchst, wäre das also sozusagen eine gekürzte "jQuery-Version" davon.

Antwort
von Spirit528, 15

Du schickst ja ein Formular (mit action="") ab. Deswegen wird die Seite neu geladen.

Also musst Du verhindern dass die Form abgeschickt wird. Oder den Form-Tag komplett entfernen, aber dann wird das Markup eigentlich invalide.

Daher versuche es mal hiermit:

<form class="form" id="calculator" name="calculator" onsubmit="return false;">

Kommentar von regex9 ,

Statt extra einen event-Listener zu definieren, würde ich eher vorschlagen, der Funktion einen Rückgabewert zu geben, um das Event-Bubbling zu verhindern.

function calc() {  /*....*/ return false; } 

Oder noch besser, um den inhaltlichen Kontext von calc nicht anzufassen:

<input type="submit" onclick="calc(); return false" />

Keine passende Antwort gefunden?

Fragen Sie die Community