Hast Du auch die Variable anzahl auf 4 gesetzt?
Beiträge von Sempervivum
-
-
-
Dann probiere dieses:
Code
Alles anzeigen<form> Gewicht: <input id="gewicht1" /> Material: <select id="material1"> <option value="">Bitte auswählen</option> <option value="10">Baumwolle</option> <option value="15">Leinen</option> <option value="20">Seide</option> </select> <span id="ergebnis1"></span> </form> <form> Gewicht: <input id="gewicht2" /> Material: <select id="material2"> <option value="">Bitte auswählen</option> <option value="10">Baumwolle</option> <option value="15">Leinen</option> <option value="20">Seide</option> </select> <span id="ergebnis2"></span> </form> <style> #gewicht { width: 100px; } </style> <script> var anzahl = 2; function berechnen(nr) { var gewicht = document.getElementById("gewicht" + nr); var material = document.getElementById("material" + nr); var ergebnis = document.getElementById("ergebnis" +nr); var valgewicht = gewicht.value.replace(",", "."); var idxmaterial = material.selectedIndex; var preis = material.options[idxmaterial].value.replace(",", "."); if (valgewicht != "" && idxmaterial != 0) { ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".",",") + ' €'; } else { ergebnis.innerHTML = ""; } } for (let nr = 1; nr <= anzahl; nr++) { document.getElementById("gewicht" + nr).addEventListener("input", function() {berechnen(nr);}); document.getElementById("material" + nr).addEventListener("change", function() {berechnen(nr);}); } </script>
Die Anzahl der Nachkommastellen kann man mir toFixed() festlegen.
-
Und sollen dann die Optionen in den Selects jedes Mal gleich sein?
-
Zum Rechenfehler: Das liegt daran, dass Javascript den Punkt als Dezimalzeichen erwartet, nicht das Komma. Das kann man jedoch leicht beheben, indem man ein Komma durch einen Punkt ersetzt:
Codefunction berechnen() { var valgewicht = gewicht.value.replace(",", "."); var idxmaterial = material.selectedIndex; var preis = material.options[idxmaterial].value.replace(",", "."); if (valgewicht != "" && idxmaterial != 0) { ergebnis.innerHTML = valgewicht * preis + ' €'; } else { ergebnis.innerHTML = ""; } }
Und die Größe der Felder kannst Du durch CSS verändern, z. B.:
ZitatWenn ich dieses Script auf meiner künftigen Homepage (es geht um Stoffe und Kleider Ankauf) 2 mal untereinander eingebe, dann habe ich ja 2 mal die Möglichkeit, mir das Gewicht und Ergebnis anzeigen zu lassen. Siehe Bild. Gibt es eine Möglichkeit, die jeweiligen Ergebnise addieren zu lassen?Das lässt sich auf jeden Fall machen. Ich fürchte nur, dass dieses Skript nur mit einem Satz von Ein- und Ausgaben funktionieren wird. Wird es denn definitiv bei zwei Sätzen bleiben oder können es noch mehr werden?
-
Ja, es gibt noch eine andere Möglichkeit:
http://jsfiddle.net/Sempervivum/sLmraL69/25/
Leider fällt es mir schwer zu erklären, warum das so ist. Um es besser zu verstehen, versuche dieses:
-
Zitat
hat fiddel sowas wie nee fehlerkonsole?
fiddle nicht, aber dein Browser. Console funktioniert bei Fiddle genau so.
-
Habe keine Ahnung aber Google weiß Rat:
-
Zitat
Und was versteht man unter flexbox.
Ja, davon ist häufig die Rede. Es hat nur entfernt etwas mit "box" zu tun und deshalb verwende ich selber lieber "Flexlayout".
Du kannst dich hier darüber informieren:
-
Dann poste doch mal den Code, mit dem Du die Tabelle erzeugst.
-
Hallo Redland,
ich habe versucht, die Animation mit CSS nachzubilden und responsiv zu machen. Dies ist soweit ganz gut gelungen:
https://jsfiddle.net/Sempervivum/s0xc3949/3/
Leider ist es mir nicht gelungen, dies in deine Seite einzubauen. Der Grund dafür ist, dass die umgebenden Container nicht der Größe des Browserfensters folgen. Deshalb ändert sich die Größe der Animation nicht, denn sie folgt mit einer Breitenangabe von 100% dem umgebenden Container.
Durch das HTML und CSS der Seite steige ich nicht auf Anhieb durch, so dass ich es auch nicht ändern konnte. Habe bisher einen Bogen um Bootstrap gemacht.
-
Anders als bei IDs kann ein Element mehrere Klassen haben. Man trennt sie dann durch Leerzeichen. D. h. in dem Beispiel weist man dem Element fünf Klassen statt einer zu.
-
Der Fehler liegt offensichtlich hier:
Du hast das article-Tag innerhalb der Schleife, das schließende weiter unten jedoch außerhalb. Dadurch hast Du mehrfach die selbe ID. Stelle das article-Tag vor die foreach-Schleife und beobachte, wie es dann aussieht.
-
Hallo Flo und willkommen im Forum,
dieses JSON ist nicht valide. Ergänze ich "]}" am Ende, ist es valide und sieht so aus:
Code
Alles anzeigen{ "feed_configs": [ { "formatter": "rss", "max": 100, "username": "google_newest", "refreshable": false, "password": "!newest!" }, { "formatter": "google", "max": 100, "username": "google_newest_sitemap", "refreshable": false, "password": "!newest_sitemap!" }, { "sources": [ "Job", "JobMarkdown", "Randstad", "KarrierePlace", "Steinbeis", "ScorePersonal", "FYE", "SEGPersonal", "JobCafe", "ElkeBode", "PlusPersonal" ], "username": "indeed", "password": "!indeed!" } ] }
Soll es so sein?
-
Klasse! Irgend wie musst Du es aber schon verstanden haben, denn Du hast Sinus und Cosinus richtig angewendet.
-
Zitat
stop und play läuft ja,aber rückwärts nicht.was für ein fehler habe ich da drinne?
- Du hast die Funktion erst ganz am Ende definiert, deshalb war sie zuvor, als Du sie dem Knopf zugewiesen hast, noch nicht definiert.
- Du hast für die Funktion und die ID des Knopfes den selben Namen verwendet.
So funktioniert es:
http://jsfiddle.net/Sempervivum/uL9A9/19/
Zitatnoch einfach ein div vor bauengeht so einfach nicht
Ich habe es zwar nicht probiert, aber eigentlich sollte das der richtige Weg sein. Dann kannst Du beide Animationen unabhängig voneinander definieren.
-
OOP mit ihren Klassen und Objekten gibt es schon ein wenig länger:
ZitatDen wirklichen Durchbruch erfuhr die objektorientierte Programmiersprache aber mit der heute immernoch sehr beliebten Sprache: C++ in den 1980er Jahren.
Schon in den 70er-Jahren ist die Programmiersprache C++ (gesprochen: C plus plus) als objektorientierte Weiterentwicklung der funktionalen Programmiersprache C entstanden. Vorgestellt wurde sie dann 1983 von ihrem Entwickler Bjarne Stroustrup.
http://www.oop-uml.de/oop-entwicklung.php
Man muss aber unterscheiden zwischen Klassen im Sinne von OOP und den Klassen von CSS. Vererbung gibt es nur bei ersteren.
-
Was war denn jetzt die Lösung, konntest Du es aus PS exportieren? Ich habe nur Elements 14 und konnte es nicht testen.
-
Wenn man eine Klasse verwendet, ist es relativ einfach:
https://jsfiddle.net/Sempervivum/54v205fn/6/
Man muss nur wissen, wie man sie setzt, abfragt und löscht, Stichwort classList.
Zitatkann man klassen eigentlich auf false und true setzen???
Nein, eine Klasse hat keinen Wert, man kann sie nur hinzu fügen und löschen. Wenn man einen Wert speichern möchte, muss man ein data-Attribut verwenden:
-
Dann poste doch mal deinen Versuch, man kann es sicher zum Laufen bringen.