HTML Taschenrechner?
Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen
<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>
LG
3 Antworten
Schwierig sowas zu erklären..
Du musst eine (am besten externe) Funktion schreiben, die bei onClick ausgeführt wird. Die könnte dann beispielsweise so aufgebaut sein, dass das Ergebnis auf eine Variable geschrieben wird. Diese Variable wird dann auf >100 geprüft und wenn true an das Ergebnis-Feld übergeben. Wenn false, passiert halt irgendwas anderes. Fehlermeldung, Seite schließt sich, irgendsowas.
Du musst das nicht mal auf eine Variable schreiben und kannst auch direkt in der If-Funktion vergleichen..
Dafür gibts die <script> Tags. Die kannst Du dann zum Beispiel in den Head reinschmeißen.
<html>
<head>
<title>HTML-Taschenrechner</title>
</head>
<body bgcolor="# 000000" text="gold">
<form name="calculator">
<input
type="button"
value="1"
onClick="document.calculator.ans.value+='1'"
/>
<input
type="button"
value="2"
onClick="document.calculator.ans.value+='2'"
/>
<input
type="button"
value="3"
onClick="document.calculator.ans.value+='3'"
/>
<input
type="button"
value="+"
onClick="document.calculator.ans.value+='+'"
/>
<input
type="button"
value="4"
onClick="document.calculator.ans.value+='4'"
/>
<input
type="button"
value="5"
onClick="document.calculator.ans.value+='5'"
/>
<input
type="button"
value="6"
onClick="document.calculator.ans.value+='6'"
/>
<input
type="button"
value="-"
onClick="document.calculator.ans.value+='-'"
/>
<input
type="button"
value="7"
onClick="document.calculator.ans.value+='7'"
/>
<input
type="button"
value="8"
onClick="document.calculator.ans.value+='8'"
/>
<input
type="button"
value="9"
onClick="document.calculator.ans.value+='9'"
/>
<input
type="button"
value="*"
onClick="document.calculator.ans.value+='*'"
/>
<input
type="button"
value="/"
onClick="document.calculator.ans.value+='/'"
/>
<input
type="button"
value="0"
onClick="document.calculator.ans.value+='0'"
/>
<input type="reset" value="Reset" />
<input
type="button"
value="="
onClick=calculateResult()
/>
Solution is
<input type="textfield" name="ans" value="" />
</form>
<script>
function calculateResult() {
var result = eval(document.calculator.ans.value);
if (result > 100) {
alert("Error: Result exceeds 100");
} else {
document.calculator.ans.value = result;
}
}
</script>
</body>
</html>
Beim programmieren musst Du lernen etwas deutlicher zu sein. Wo genau liegt das Problem? Öffnet die Seite nicht? Ist die Seite Schwarz? Kannst Du keine Zahlen eingeben? Kommt kein Ergebnis? Etc.
Ja okay mach ich das nächste Mal es funktioniert alles bis auf das was ich haben wollte und zwar das es über hundert rechnet das wollte ich ja so haben das es nicht funktioniert bzw. Ein Error kommt und dies funktioniert nicht.
LG
Hast Du den ganzen Code oder nur das Script kopiert? Klingt mir, als würde der Aufruf zur Funktion fehlen.
Nur das Script ist mir aber aufgefallen und hab's gemacht bzw. Mach ich gerade weil ich noch ein paar viele Dinge dazu habe muss ich halt ergänzen
Hey nochmal ich nur auf PC hier mein komplettes Script ich hab keine ahnung woran es liegt aber es funktioniert anscheinend nicht damit könntest du mal drüber gucken?
<html>
<head>
<title>
Meine Erste website
</title>
</head>
<style>
body {
background-color: #0B0B61;
}
.alles {
background-color: #A9F5F2;
margin-left: 15px;
border-radius: 18px
}
#Zahlen {
width: 85px;
border-radius: 18px
}
#Sonderzeichen {
width: 70px;
border-radius: 18px
}
#Plusminusmal {
width: 60px;
border-radius: 18px
}
#AC {
width: 130px;
border-radius: 18px
}
#Null {
width: 65px;
border-radius: 18px
}
#durch {
width: 50px;
border-radius: 18px
}
#Istgleich {
width: 70px;
border-radius: 18px
}
</style>
<font color="red">
<b>
<span style="font-size:40">
<center> Willkommen
</center>
</span>
<b/>
</font>
<center>
<br>
</br>
<br>
</br>
<font color="red">
<span style="font-size:15">
<h1>Taschenrechner</h1>
</span>
<b/>
</font>
<body>
<form name="calculator">
</br>
<input
style="font-size:30"
type="textfield"
name="ans"
value=""
/>
<br>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="7"
onClick="document.calculator.ans.value+='7'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="8"
onClick="document.calculator.ans.value+='8'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="9"
onClick="document.calculator.ans.value+='9'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="+"
onClick="document.calculator.ans.value+='+'"
/>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="4"
onClick="document.calculator.ans.value+='4'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="5"
onClick="document.calculator.ans.value+='5'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="6"
onClick="document.calculator.ans.value+='6'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="-"
onClick="document.calculator.ans.value+='-'"
/>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="1"
onClick="document.calculator.ans.value+='1'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="2"
onClick="document.calculator.ans.value+='2'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="3"
onClick="document.calculator.ans.value+='3'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="*"
onClick="document.calculator.ans.value+='*'"
/>
</br>
<br>
<input
id="Null"
class="alles"
style="font-size:90"
type="button"
value="0"
onClick="document.calculator.ans.value+='0'"
/>
<input
id="durch"
class="alles"
style="font-size:90"
type="button"
value="/"
onClick="document.calculator.ans.value+='/'"
/>
<input
id="Istgleich"
class="alles"
style="font-size:90"
type="button"
value="="
onClick="document.calculator.ans.value=eval(document.calculator.ans.value)" />
<input
id="AC"
class="alles"
style="font-size:90"
type="reset"
value="AC"
/>
</br>
</center>
</form>
<script>
function calculateResult() {
var result = eval(document.calculator.ans.value);
if (result > 100) {
alert("Error: Result exceeds 100");
} else {
document.calculator.ans.value = result;
}
}
</script>
</body>
</html>
LG
In Deinem Code rufst Du die Funktion nicht auf, wenn Du auf das = drückst.
In welcher Zeile meinst du jetzt? Oder am besten kannst du's mir Mal richtig schicken?
Okay schau. Weißt Du was dieses onClick ist? onClick führt eine Funktion aus, wenn Du klickst. Das kann also entweder eine kleine Funktion wie
document.calculator.ans.value+='8
sein, oder eben ein Verweis auf eine Funktion die Du im Script stehen hast.
Im Script hast Du die Funktion
function calculateResult()
Und so eine Funktion kannst Du mit
calculateResult()
aufrufen. Also ohne "function" davor. Das brauchst Du nur zum deklarieren.
Jetzt schau mal was in meinem Code bei dem = hinter onClick steht und was bei Deinem Code dahinter steht.
Also wenn ich's jetzt richtig verstanden habe soll ich nur das = hinter dem onClick entfernen oder?
Du hast ja geschrieben ich soll gucken was hinter dem onClick steht. Ich habe Mal meins mit deinem verglichen und habe keinen unterschied feststellen können.
LG
Hat sich erledigt hab mein Fehler gefunden hattest Recht wusste nur nicht das du beim ist gleich meintest hab dich falsch verstanden dank für deine Hilfe
LG
Hey nochmal ich nur auf PC hier mein komplettes Script ich hab keine ahnung woran es liegt aber es funktioniert anscheinend nicht damit könntest du mal drüber gucken?
<html>
<head>
<title>
Meine Erste website
</title>
</head>
<style>
body {
background-color: #0B0B61;
}
.alles {
background-color: #A9F5F2;
margin-left: 15px;
border-radius: 18px
}
#Zahlen {
width: 85px;
border-radius: 18px
}
#Sonderzeichen {
width: 70px;
border-radius: 18px
}
#Plusminusmal {
width: 60px;
border-radius: 18px
}
#AC {
width: 130px;
border-radius: 18px
}
#Null {
width: 65px;
border-radius: 18px
}
#durch {
width: 50px;
border-radius: 18px
}
#Istgleich {
width: 70px;
border-radius: 18px
}
</style>
<font color="red">
<b>
<span style="font-size:40">
<center> Willkommen
</center>
</span>
<b/>
</font>
<center>
<br>
</br>
<br>
</br>
<font color="red">
<span style="font-size:15">
<h1>Taschenrechner</h1>
</span>
<b/>
</font>
<body>
<form name="calculator">
</br>
<input
style="font-size:30"
type="textfield"
name="ans"
value=""
/>
<br>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="7"
onClick="document.calculator.ans.value+='7'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="8"
onClick="document.calculator.ans.value+='8'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="9"
onClick="document.calculator.ans.value+='9'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="+"
onClick="document.calculator.ans.value+='+'"
/>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="4"
onClick="document.calculator.ans.value+='4'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="5"
onClick="document.calculator.ans.value+='5'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="6"
onClick="document.calculator.ans.value+='6'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="-"
onClick="document.calculator.ans.value+='-'"
/>
</br>
<br>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="1"
onClick="document.calculator.ans.value+='1'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="2"
onClick="document.calculator.ans.value+='2'"
/>
<input
id="Zahlen"
class="alles"
style="font-size:90"
type="button"
value="3"
onClick="document.calculator.ans.value+='3'"
/>
<input
id="Plusminusmal"
class="alles"
style="font-size:90"
type="button"
value="*"
onClick="document.calculator.ans.value+='*'"
/>
</br>
<br>
<input
id="Null"
class="alles"
style="font-size:90"
type="button"
value="0"
onClick="document.calculator.ans.value+='0'"
/>
<input
id="durch"
class="alles"
style="font-size:90"
type="button"
value="/"
onClick="document.calculator.ans.value+='/'"
/>
<input
id="Istgleich"
class="alles"
style="font-size:90"
type="button"
value="="
onClick="document.calculator.ans.value=eval(document.calculator.ans.value)" />
<input
id="AC"
class="alles"
style="font-size:90"
type="reset"
value="AC"
/>
</br>
</center>
</form>
<script>
function calculateResult() {
var result = eval(document.calculator.ans.value);
if (result > 100) {
alert("Error: Result exceeds 100");
} else {
document.calculator.ans.value = result;
}
}
</script>
</body>
</html>
LG
Wenn man im Browser Taste "F12" drückt kann man die Entwickler Umgebung öffnen. Damit kann man dann im eigenen Script Schritt für Schritt durchgehen und die Fehler finden (debuggen)
Hey danke für deine Hilfe aber es kam ja garkeine Fehler Meldung also hat mir das nichts genützt aber das debugg Fenster benutze ich jetzt öfters also warst du trotzdem eine Hilfe danke
LG
Browser werfen nicht zwingend eine Exception. Die sind sehr robust auch wenn das Script darunter nicht funktioniert. Warum nun dein Programm nicht wie gewünscht läuft kann bei komplexen Programmen nur mit Debugging gefunden werden.
Hey erstmal danke für deine Antwort ich habe es direkt ausprobiert aber musste feststellen das es nicht geht leider. Ich weiß leider nicht woran es liegt aber es geht nicht.
LG