Javascript-Taschenrechner
Hallo,
Ich muss als Aufgabe einen Taschenrechner programmieren. Das hat bis hierhin ganz gut funktioniert, jedoch verschwindet das Ergebnis nach nicht einmal einer Sekunde. Ich habe bereits Google durchsucht, habe aber leider keine Antwort gefunden. Wer will kann mir auch helfen, die beiden Textfelder unbearbeitbar zu machen, wenn man mit der Maus darüberfährt.
Mein bisheriger Code:
Taschenrechner
4 Antworten
Code ins Fenster kopieren, alles markieren, "Codebeispiel einfügen" aus der Werkzeugleiste über dem Eingabefeld anklicken.
Tut mir leid es gab ein Problem mit dem Code einfügen...
Egal hoffentlich könnt ihr mir trotzdem helfen
<!DOCTYPE html>
<html>
<head>
<title>
Taschenrechner
</title>
<style>
td { border-style:solid; border-width:2px;
}
.number { background-color:#aaaaaa;
}
.operator { background-color:#cccccc;
}
</style>
<script type="text/javascript">
var operand = "";
function add(wert){
window.document.Rechner.displayValue.value += wert;
}
function operate(operation){
window.document.Rechner.displayValue.value += operation;
window.document.Rechner.result.value = window.document.Rechner.displayValue.value;
window.document.Rechner.displayValue.value = ""
}
function calc(){
if (operand == "+"){
}else if(operand=="-")
var x = 0;
var y = 0;
x = eval(window.document.Rechner.displayValue.value);
window.document.Rechner.displayValue.value = x;
window.document.Rechner.result.value += window.document.Rechner.displayValue.value;
window.document.Rechner.displayValue.value = window.document.Rechner.result.value;
y = eval(window.document.Rechner.result.value);
window.document.Rechner.displayValue.value = y;
window.document.Rechner.result.value = ""
}
function setOperand(op){
if(op == "+"){
operand = op;
}else{
calc();
operand = op;
}
{
if (operand == "*"){
}else if(operand=="/")
var x = 0;
var y = 0;
x = eval(window.document.Rechner.displayValue.value);
window.document.Rechner.displayValue.value = x;
window.document.Rechner.result.value += window.document.Rechner.displayValue.value;
window.document.Rechner.displayValue.value = window.document.Rechner.result.value;
y = eval(window.document.Rechner.result.value);
window.document.Rechner.displayValue.value = y;
window.document.Rechner.result.value = ""
}
}
</script>
</head>
<body>
<form name="Rechner">
<h1>Taschenrechner</h1>
<table cellpadding="10px" cellspacing="10px">
<tr>
<td colspan="5"><input name="result" type="text" /></td>
</tr>
<tr>
<td onmouseover="" colspan="5"><input name="displayValue" type="text" /></td>
</tr>
<tr>
<td class="number"><input type="button" onclick="add(7)" value="7" /></td>
<td class="number"><input type="button" onclick="add(8)" value="8" /></td>
<td class="number"><input type="button" onclick="add(9)" value="9" /></td>
<td class="operator"><input type="button" onclick="operate('+')" value="+" /></td>
<td class="operator"><input type="button" onclick="operate('-')" value="-" /></td>
</tr>
<tr>
<td class="number"><input type="button" onclick="add(4)" value="4" /></td>
<td class="number"><input type="button" onclick="add(5)" value="5" /></td>
<td class="number"><input type="button" onclick="add(6)" value="6" /></td>
<td class="operator"><input type="button" onclick="operate('*')" value="*" /></td>
<td class="operator"><input type="button" onclick="operate('/')" value="/" /></td>
</tr>
<tr>
<td class="number"><input type="button" onclick="add(1)" value="1" /></td>
<td class="number"><input type="button" onclick="add(2)" value="2" /></td>
<td class="number"><input type="button" onclick="add(3)" value="3" /></td>
<td colspan="2" class="operator"><input type="submit" onclick="calc()" value="=" /></td>
</tr>
<tr>
<td class="number" colspan="2"><input type="button" onclick="add(0)" value="0" /></td>
<td><input type="button" onclick="add('.')" value="." /></td>
<td colspan="2"><input type="reset" value="C" /></td>
</tr>
<table>
</form>
</body>
</html>
<html>
<script language="javascript">
function Zahl1()
{
document.forms[0].elements[0].value=document.forms[0].elements[0].value+1;
}
…
var Sum1=0;
var reop=0;
function Plus()
{
Sum1=document.forms[0].elements[0].value;
document.forms[0].elements[0].value="";
reop=1;
}
…
var Sum2=0;
function Ergebnis()
{ var Summe=0;
Sum2=document.forms[0].elements[0].value;
document.forms[0].elements[0].value="";
if (reop==1)
{ Summe=
parseInt(Sum1) +
parseInt(Sum2);
document.forms[0].elements[0].value=Summe;
}
}
function Löschen()
{
document.forms[0].elements[0].value="";
}
</script>
<body>
<form>
<input type="text">
<input type="button" value="<=" onClick="Löschen()">
<input type="button" value="="onClick="Ergebnis()"> <br>
<input type="button"
value="0" onClick="Zahl0()">
<input type="button" value="1" onClick="Zahl1()">
<input type="button" value="2" onClick="Zahl2()">
<input type="button" value="+" onClick="Plus()">
</form>
</body>
</html>
Das Ergebnis verschwindet sofort, weil der Button mit dem "=" Zeichen die umliegende Form absendet (type="submit"). Um das zu verhindern kannst du das onclick Attribut wie folgt verändern:
onclick="calc(); return false;"
Alternativ vergibst du einfach anstatt type "submit":
input type="button"
Um die Felder unveränderbar zu machen kannst du einfach das readonly-Attribut vergeben
<input name="result" type="text" readonly>