JavaScript ⁸Taschenrechner Anfänger

Anonymous User · 17. Januar 2020

Hallo,

ich bin absoluter Anfänger im Programmieren.
Nun wollte ich mittels JavaScript einen einfachen Taschenrechner programmieren. Dabei habe ich lediglich den Code sündhaft von einem Beispiel kopiert und versucht es zu verstehen.

Leider verstehe ich nicht sonderlich viel und wollte euch bitten, mir allgemein den Code zu erklären, wieso, weshalb, warum genau das da steht.

Ich brauch eure Hilfe.

Bei Code1 verstehe ich den gesamten Script nicht.

Bei Code2 ist mein Ziel, dass sich die Ziffern nach dem Klick im Textfeld einreihen. Quasi wenn man mehrmals den Button betätigt, mehrere Ziffern nebeneinander stehen.

Code1:

Code:

<!DOCTYPE html>
<html>
<body>
<script>
function insert(number){
document.formular.screen.value =
document.formular.screen.value+number
}
function equal(){
var test = document.formular.screen.value
if(test){
document.formular.screen.value = eval(test)
}
}
</script>
<form name = "formular">
<input class = "textview" name="screen">
</form>

<table>
<tr>
<td><input class="button" type="button" value="x" onclick="insert('*')" ></
td>
</tr>

<tr>
<td> <input class="button" type="button" value="7" onclick="insert(7)" ></
td>
<td> <input class="button" type="button" value="8" onclick="insert(8)" ></
td>
<td> <input class="button" type="button" value="9" onclick="insert(9)" ></
td>
<td> <input class="button" type="button" value="-" onclick="insert('-')" ></
td>
</tr>

<tr>
<td> <input class="button" type="button" value="4" onclick="insert(4)" ></
td>
<td> <input class="button" type="button" value="5" onclick="insert(5)" ></
td>
<td> <input class="button" type="button" value="6" onclick="insert(6)" ></
td>
<td> <input class="button" type="button" value="+" onclick="insert('+')"
></td>
</tr>

<tr>
<td> <input class="button" type="button" value="1" onclick="insert(1)" ></
td>
<td> <input class="button" type="button" value="2" onclick="insert(2)" ></
td>
<td> <input class="button" type="button" value="3" onclick="insert(3)" ></
td>
<td> <input class="button" type="button" value="=" onclick="equal()" ></
td>
</tr>
</table>

</div>
</body>
</html>

Code2:

Code:

<!DOCTYPE html>
<html>
<body>
<input type="textview" id="button1" value="">
<button onclick="test()">1</button>
<script>
function test() {
document.getElementById("button1").value="1"
}
</script>
</body>
</html>

Grüße
Anonymous User

benneq · 17. Januar 2020

Zu Code2

Dort steht: document.getElementById("button1").value="1"

Erinner dich mal an deine Grundschulmatheaufgaben: Wenn irgendwo "x = 1" steht, welchen Wert hat dann x? Genau: 1. Und wenn du danach noch mal "x = 1" schreibst, dann wird der Wert von x wie geändert? Er wird überschrieben mit 1.
~~Wenn du den Wert von x "ändern" willst, dann musst du dich auch auf den ursprünglichen Wert von x beziehen. Z.B. "x = x + 1".~~

RalphS · 17. Januar 2020

Mach den Menschen doch nicht noch konfuser. Zuweisung ist nicht Gleichheit und x=x+1 mathematisch/logisch eine Tautologie (false).

maxpayne80 · 17. Januar 2020

Bei Code2 verstehe ich nicht, warum die Ziffer nur einmal im Inputfeld erscheint, wenn man den Button betätigt.

Weil die function "test()" mit dem click-event des buttons verknüpft ist :

<button onclick="test()">1</button>

Und warum "nur einmal" :

weil eben der Wert des Buttons immer KOMPLETT neu gesetzt wird auf den Wert, den Du in test definiert hast, und zwar "1"

... willst du da jedes mal nen anderen wert, dann eben so ( habs nicht getestet, aber in dem sinne ) :

Code:

function test() {
var btn = document.getElementById("button1");
var cur = btn.value();
 document.getElementById("button1").value=(cur + 1);
}

breedmaster · 17. Januar 2020

Seid doch so gut und schreibe den Code in einen Codeblock hier im Forum.
Oberhalb des Eingabefeld siehst du in der mitte neben dem Smilie 3 Punkte. Draufdrücken und im Dropdown Code auswählen. Da den Code reinkopieren.

Anonymous User · 17. Januar 2020

Danke für die bisherigen Antworten.

Code:

function test() {
var btn = document.getElementById("button1");
var cur = btn.value();
document.getElementById("button1").value=(cur + 1);
}

Das probiere ich gleich mal aus.

Ergänzung (17. Januar 2020)

Der Code funktioniert bei mir leider nicht. Wenn ich klicke, passiert nichts.

Außerdem will ich nicht, dass sich der Wert ändert, sondern dass sich die Ziffern einreihen.

Sorry, schlecht ausgedrückt.

maxpayne80 · 17. Januar 2020

Code:

<!DOCTYPE html>
<html>
<body>
<input type="textview" id="button1" value="">
<button onclick="test()">1</button>
<script>
function test() {
var btn = document.getElementById("button1");
 btn.value=btn.value + 1;
}
</script>
</body>
</html>

... meinem Gefühl nach solltest Du aber mehr selber recherchieren, sonst ist nix mit lernen,
daher wars das für mich hier, gl

benneq · 17. Januar 2020

@maxpayne80

Code:

btn.value=btn.value + 1;

Funktioniert auch nur so in JS, weil in diesem Fall automatisch von String zu Number gecastet wird. Sicherlich nicht die feine englische Art, aber für einen Anfänger erfüllt es sicherlich erstmal den Zweck was richtiges auf dem Bildschirm zu sehen.

schasi · 17. Januar 2020

Vermutlich fehlen zu viele Grundlagen um ein erweitertes Beispiel zu verstehen. Deswegen würde ich mich an deiner Stelle darum bemühen und vielleicht ein einfaches Tutorial durchmachen, mit dem Taschenrechner als Ziel. Ich schaue mir auch meist verschiedene an bis ich eins finde das mir zusagt.

Manche Sachen verstehe ich trotzdem nicht und schaue dann noch per Google oder in anderen Tutorials, bis ich es verstanden habe.

Viel Erfolg!

LuciusVorenus · 17. Januar 2020

Welchen Browser benutzt du denn. Wenn bei onclick nix passiert, liegt das eventuell auch an der Content Security Police

Code:

document.getElementById("myButton").addEventListener("click", functionName);

Mein Tipp: Lass deinen Code nicht von anderen korrigieren. Gehe selbst auf Fehlersuche. Nutze dafür zum Beispiel das Debugging Tool deines Browsers. Hier findest du eine Anleitung für Chrome -> Klick

Es ist harte Schule, aber es ist besser seine eigenen Fehler zu finden, zu verstehen und zu beheben, als alles vorgekaut zu bekommen. Ich wünsche dir trotzdem viel Erfolg beim Coden. Lass dich da nicht entmutigen.

Anonymous User · 17. Januar 2020

Ja, anscheinend fehlen mir auch noch zu viele Grundlagen, sodass ich es nicht verstehen kann.
Ich werde noch viel üben.

maxpayne80 · 17. Januar 2020

benneq schrieb:
Funktioniert auch nur so in JS,

Exakt, daher bin ich primär lieber im Backend tätig mit typisierten Sprachen

Anonymous User schrieb:
Ja, anscheinend fehlen mir auch noch zu viele Grundlagen, sodass ich es nicht verstehen kann.
Ich werde noch viel üben.

So ist es, dem Eindruck nach ist nahezu kein Verständnis der absoluten Grundlagen da, denn das Beispiel da ist wirklich trivialst, etwas auf dem Niveau MUSST du selbstständig durch Recherche rausfinden.

Kannst Du das nicht, dann wirst Du unweigerlich scheitern, denn es gibt da ganz andere Mechaniken im JS-Umfeld, die dann eher Gehirnschmalz erfordern als diese einfachen Dom-Manipulationen, wenn ich an callbacks und promises denke

benneq · 17. Januar 2020

maxpayne80 schrieb:
Exakt, daher bin ich primär lieber im Backend tätig mit typisierten Sprachen

Man kann auch einfach TypeScript nehmen - damit hat man dann schon mal 95% der Missstände aus JS beseitigt.

Bei deinem Beispiel Code wäre ich mir dennoch nicht sicher, ob das so funktioniert:
"1"+1 (und 1+"1") ergibt in JS einen String mit dem Wert "11".

Suche

JavaScript ⁸Taschenrechner Anfänger

Anonymous User

Ensign

benneq

Fleet Admiral

RalphS

Gast

maxpayne80

Commander

breedmaster

Cadet 3rd Year

Anonymous User

Ensign

maxpayne80

Commander

benneq

Fleet Admiral

schasi

Lieutenant

LuciusVorenus

Cadet 4th Year

Anonymous User

Ensign

maxpayne80

Commander

benneq

Fleet Admiral

Ähnliche Themen