[JavaScript] Wie mache ich es richtig?

Status
Für weitere Antworten geschlossen.
D

dont ScreaM

Neuling
Thread Starter
Mitglied seit
25.01.2017
Beiträge
385
Hallo,
ich möchte es so machen das sich alles "updated" sobald man den Input ändert.
Ich hab ein Listener + eine Funktion. Problem ist ich weiß nicht was ich falsch mache.

Code: 
/* listener */
document.getElementsByName("html")[0].addEventListener('change', myfunc);

/* function */
function myfunc() {
  var input1 = document.getElementById("input1").value;
  var input2 = document.getElementById("input2").value;
  var input3 = document.getElementById("input3").value;
  var / = input1 + input2;
  document.getElementById("output").innerHTML = x;
}

Ich möchte das es ohne einen "(start/go)button" funktioniert sondern on change sobald sich was ändert.
 
Wenn Du diese Anzeige nicht sehen willst, registriere Dich und/oder logge Dich ein.
Wenn du nun noch das HTML dazu mitlieferst, dann kann man dir auch helfen. Syntaktisch sieht es auf jeden Fall schonmal schwer falsch aus.
 
Fallwrrk schrieb:
Wenn du nun noch das HTML dazu mitlieferst, dann kann man dir auch helfen. Syntaktisch sieht es auf jeden Fall schonmal schwer falsch aus.
Zum Vergrößern anklicken....

HTML
Code: 
<input name="searchTxt" type="number" id="input1" onkeypress="doThing()" />
<input name="searchTxt" type="number" id="input2" onkeypress="doThing()" />
<input name="searchTxt" type="number" id="input3" onkeypress="doThing()" />
<div id=output></div>
 
Ich glaube kaum, dass das wirklich das HTML zu dem JS ist, aber okay.

  • Alle drei Inputs haben ein "onkeypress" mit einer Funktion, die gar nicht in deinem JS existiert. Das allein würde schon reichen, dass gar nichts mehr ausgeführt wird.
  • JS im HTML ist stark Bad Practice. Löse das Problem lieber mit Listenern, also wie in deinem JS im ersten Post in der zweiten Teile. Halte sämtliches JS aus deinem HTML raus, ohne Ausnahme.
  • Auch wenn viele Browser selbstständig ein "<html></html>" um dein HTML packen, so solltest du es trotzdem immer mitschreiben und nicht einfach drei Inputs in ne Textdatei werfen. Ohne die HTML-Tags gibt es haufenweise Probleme, ältere Browser rendern das HTML dann nichtmal.
  • Alle drei Inputs haben exakt den gleichen Namen, heißt, wenn das Formular abgeschickt wird (wenn es denn überhaupt eins ist), dann würde der dritte Input den Rest einfach überschreiben.
  • Du willst dir mit "getElementsByName()" ein Element mit dem Namen "html" holen. Es gibt kein Element mit diesem Namen. Es gibt nur drei Elemente mit dem Namen "searchTxt". Wenn du das gesamte HTML holen willst, dann wäre das "getElementsByTagname()", was aber auch nicht richtig wäre, da du ziemlich sicher nur den Body willst, also "getElementsByTagname()". Dann bekämst du aber eine NodeList, auf der du das [0]te Element rausholen müsstest. Also gibst du dem Body lieber ein 'id="body"' und nutzt dann "getElementById('body')".
  • Vorausgesetzt der Listener würde überhaupt funktionieren, dann würdest du nicht auf Änderungen in den Inputs reagieren, sondern auf Änderungen im DOM. Setze einen eigenen Listener für jedes Element, für das du das Event ausführen möchtest, aber nicht einfach n dreckigen Listener über die gesamte Seite, der dann irgendeine lustige Magic vollführt.
  • Bei JavaScript funktioniert war echt der größte Müll als Variablennamen, aber ein "/" ist definitiv nicht gültig.
  • Die Variable X, die du in das Output-Div schreiben willst, existiert gar nicht.
  • "input3" wird gar nicht benutzt.

Insgesamt hab ich das Gefühl, als ob das einfach nur irgendein zusammen geschmissener Haufen ist, bei dem nicht ein einziges Mal darauf geachtet wurde, ob das überhaupt im Ansatz funktionieren kann, geschweige denn würde ne Fehlermeldung gelesen und verstanden. Ich weiß ehrlich gesagt nichtmal was du überhaupt vor hast.
 
Ich will einen kleinen Rechner erstellen, es soll "on the fly" berechnet werden, ohne Enter oder "ok" Button drücken.
Ich will das es bei jeder Änderung aktualisiert.

Ich fange grad mit Javascript an und so leicht ist es nicht :(

Das HTML ist von JSfiddle was ich benutze, bei meinem Index HTML sieht es anders aus. HTML Doctype Deklaration php include usw.
 
Zuletzt bearbeitet:
Code: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Taschenrechner</title>
  </head>
  <body>
    <input type="number" id="number1"> + <input type="number" id="number2"> = <span id="result"></span>
    <script type="text/javascript" src="main.js"></script>
  </body>
</html>

Code: 
function calculate() {
  var number1 = parseFloat(document.getElementById('number1').value);
  var number2 = parseFloat(document.getElementById('number2').value);

  document.getElementById('result').innerHTML = '';

  if (number1 && number2) {
    document.getElementById('result').innerHTML = number1 + number2;
  }
}

document.getElementById('number1').addEventListener('change', calculate);
document.getElementById('number2').addEventListener('change', calculate);

Wenn du schon an einem Taschenrechner scheiterst, dann beschäftige dich bitte erstmal weiterhin mit JavaScript und lass PHP und besonders C++/die Unreal Engine erstmal außen vor.
 
Wenn du schon an einem Taschenrechner scheiterst, dann beschäftige dich bitte erstmal weiterhin mit JavaScript und lass PHP und besonders C++/die Unreal Engine erstmal außen vor.
Zum Vergrößern anklicken....

Die Aussage kann ich nur unterstützen. Wenn du es nichtmal schaffst so etwas simples wie einen Taschenrechner hier auf die Beine zu stellen wirst du noch viel Zeit benötigen. Das Problem hätte man mit Google innerhalb weniger Minuten lösen können auch ohne Plan davon zu haben. Ist ja nicht so als ob wir das nicht auch ständig machen würden. Ich arbeite mich derzeit durch die QT Dokumentation durch bzw. arbeite mich dort ein.
 
Zuletzt bearbeitet:
Gubb3L schrieb:
Die Aussage kann ich nur unterstützen. Wenn du es nichtmal schaffst so etwas simples wie einen Taschenrechner hier auf die Beine zu stellen wirst du noch viel Zeit benötigen. Das Problem hätte man mit Google innerhalb weniger Minuten lösen können auch ohne Plan davon zu haben. Ist ja nicht so als ob wir das nicht auch ständig machen würden. Ich arbeite mich derzeit durch die QT Dokumentation durch bzw. arbeite mich dort ein.
Zum Vergrößern anklicken....

Google ist eine Suchmaschine, denk mal bitte kurz nach. Würde ich Google nicht benutzen wie würde ich überhaupt von "listener" oder sogar irgendwas lernen können?
 
Da gibt es so Sachen wie Hilfen von der Entwicklungsumgebung oder total krass und oldschool Bücher.
 
Schau dir die O Reilly Bücher an. 1000 Seiten klopper aber es hilft. Bin selbst gerade dabei weil aus uh ich mach mir ne Webseite mit Forum und gedöns irgendwann dann die Erkenntnis kam das es einiges mehr braucht... Viel Erfolg

Gesendet von meinem D6603 mit Tapatalk
 
D3rs3lbi43 schrieb:
Schau dir die O Reilly Bücher an. 1000 Seiten klopper aber es hilft. Bin selbst gerade dabei weil aus uh ich mach mir ne Webseite mit Forum und gedöns irgendwann dann die Erkenntnis kam das es einiges mehr braucht... Viel Erfolg

Gesendet von meinem D6603 mit Tapatalk
Zum Vergrößern anklicken....

Ja also ich bin eher so der Front end XD
HTML5 und CSS3 on fleek... :p
Aber mit PHP, JS Katastrophe haha
 
Das würde ich aufgrund des Codes im ersten Beitrags mal stark bezweifeln
 
Du bist eher so Frontend? :fresse:

Mach doch bitte endlich einen HTML/CSS/JS Kurs im Internet, das würde dir das Leben so sehr erleichtern.
 
Zuletzt bearbeitet:
Einen UX/UI Kurs kannst du auch gleich noch belegen wenn du schon mal dabei bist
 
Fallwrrk schrieb:
Das ist jetzt n schlechter Scherz, oder?
Zum Vergrößern anklicken....

Verstehe dein Problem jetzt nicht.

Verstehe ich nur nicht was ihr für ein Problem habt?
Ich stelle nett eine Frage wo ich um Hilfe bitte, ihr hilft mir evtl auch nicht und ist gut.
Wenn ihr nicht helfen wollt und nichts Sinnvolles beiträgt anstatt "Mach ein Kurs", bezahl mir den und ich gehe hin. Wenn nicht, wozu überhaupt diese Diskussion?
 
Zuletzt bearbeitet:
Ich habe dir schon mal woanders kostenlose Kurse verlinkt. Abgesehen davon sind die meistens nicht teurer als ein Buch, und die wolltest du dir doch auch kaufen?

Du kommst hier einfach als komplett beratungsresistent rüber, da verliert mal halt die Lust. Vielleicht Ist es auch einfach das falsche Forum für deine Fragen.
 
Schau ansonsten mal bei Udemy dort ist gerade einiges reduziert und wenn man sich vorher die Bewertungen zu den Kursen anschaut kann da eigentlich nicht viel schief gehen
 
dont ScreaM schrieb:
Verstehe dein Problem jetzt nicht.
Zum Vergrößern anklicken....

Ich hoffe jetzt, du hast nicht wirklich einer der Input-Felder zum Dropdown gemacht. Das ist einfach so falsch und kaputt...

dont ScreaM schrieb:
Ich stelle nett eine Frage wo ich um Hilfe bitte, ihr hilft mir evtl auch nicht und ist gut.
Zum Vergrößern anklicken....

Das Problem der Meisten wird wohl einfach sein, dass über 80% der Threads in diesem Unterforum von dir sind und die gleichen immer wiederkehrenden und maximal simplen Fragen stellen, die man innerhalb weniger Sekunden hätte googeln können. Eine Suche nach "JavaScript Taschenrechner" führt beim ersten Ergebnis bereits zu einem funktionierenden Beispiel, sogar mit allen vier Grundoperationen und nicht nur Addition. Du könntest jetzt verdammt pissig auf mich sein, aber um es mal so zu sagen wie es ist: Wenn ich mir den Code im ersten Post anschaue und dann deine ersten Threads von vor über 3 Monaten in diesem Unterforum, dann hast du absolut keinen Fortschritt gemacht. Ein "var / = input1 + input2;" bedeutet, dass du das wirklich absolute Mindestmaß an Syntax in JavaScript noch immer nicht verstanden hast, sonst würdest du wissen, dass ne Variable kaum "/" heißen kann. Und das führt mich zu...

dont ScreaM schrieb:
bezahl mir den
Zum Vergrößern anklicken....

...dem hier! DU willst coden lernen, also musst DU auch was dafür tun. Und scheinbar kriegst du es alleine mit Google nicht hin. Also (A) belegst du endlich einen guten Basiskurs oder kaufst dir ein gutes Buch oder (B) du lässt es einfach bleiben.
 
Falsch und Kaputt?
Wenn ich mal fertig bin dann sende ich dir mal den Link und dann sagst du nochmal ob es "falsch und kaputt" ist.
Das mit den "var" verstehe ich. Nur weil ich zu schnell den Shift gedrückt hab beim schreiben heißt es nicht sofort das ich nicht weiß wie man Variablen benutzt :)
Nach so einer Resonanz hier mach dir keine Sorgen, ich komme nicht mehr in dieses Unterforum weil es ja nicht zum lernen dient. Stackoverflow gibt es auch :) Mfg.
 
Zuletzt bearbeitet:
dont ScreaM schrieb:
Falsch und Kaputt?
Wenn ich mal fertig bin dann sende ich dir mal den Link und dann sagst du nochmal ob es "falsch und kaputt" ist.
Zum Vergrößern anklicken....

Ein fucking Dropdown für die Zahlenfelder eines Taschenrechners zu benutzen IST kaputt. Was willst du da bitte erstellen? Eine Liste aller Zahlen bis unendlich inklusive Nachkommastellen oder was??

dont ScreaM schrieb:
Das mit den "var" verstehe ich. Nur weil ich zu schnell den Shift gedrückt hab beim schreiben heißt es nicht sofort das ich nicht weiß wie man Variablen benutzt
Zum Vergrößern anklicken....

Shift?! Wie wolltest du die Variable denn bitte nennen? "7"? Und findest du nicht, dass du dir deinen Code vielleicht auch mal kurz anschauen könntest, bevor du ihn postest?

dont ScreaM schrieb:
Stackoverflow gibt es auch
Zum Vergrößern anklicken....

Bei Stack Overflow gibt es auf Fragen mit so einem Code wahrscheinlich nichtmal ne Antwort.
 
Das Ding ist, dass man diese Fragen nicht stellen müsste, wenn man sich mit dem Thema beschäftigt und nicht kopflos drauf los probiert.


Aber nun hat sich das thema ja erledig, da der TE sich ein anderes Forum sucht ;)
 
Status
Für weitere Antworten geschlossen.
Hardwareluxx setzt keine externen Werbe- und Tracking-Cookies ein. Auf unserer Webseite finden Sie nur noch Cookies nach berechtigtem Interesse (Art. 6 Abs. 1 Satz 1 lit. f DSGVO) oder eigene funktionelle Cookies. Durch die Nutzung unserer Webseite erklären Sie sich damit einverstanden, dass wir diese Cookies setzen. Mehr Informationen und Möglichkeiten zur Einstellung unserer Cookies finden Sie in unserer Datenschutzerklärung.


Zurück
Oben Unten refresh