Willkommen im Forum!
oder es besser machen könnte
Kein Drama, aber es ist besser, Code in Textform zu posten, denn wenn man die Frage beantworten will ist es häufig angebracht, eine Testdatei anzulegen und dann tut man sich damit leichter. Und dabei Code-Tags benutzen, das </> in der Werkzeugleiste oben.
Wenn ich es richtig verstanden habe, muss ich für die Positionierung von divs nebeneinander "nur" den Befehl display: inline nutzen, oder?
Das stimmt im Prinzip, es gibt jedoch (mindestens) einen Fallstrick bei der Sache:
padding und border werden der Breite zugeschlagen. Z. B. wenn Du zwei Container mit der Breite 50% hast, 10px padding und 2px border und der Platz beträgt 1000px, dann ergibt sich für einen Container jeweils ein Breite von 524px, so dass sie nicht mehr nebeneinander in die verfügbare Breite von 1000px nebeneinander passen.
Lösung 1:
Die Breite berechnen, indem padding und border von den 50% subtrahiert werden.
Lösung 2 (besser):
box-sizing: border-box; verwenden, siehe hier:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing
Lösung 3 (am besten):
Flexlayout verwenden, siehe z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Damit hast Du noch viele weitere Möglichkeiten, die Anordnung der Element zu steuern.
Der Hauptgrund für deine Probleme mit dem Layout ist jedoch, dass Du float verwendest. Auch darauf kannst Du verzichten, wenn Du Flex nimmst.
allerdings wird Java von keinem Browser mehr unterstützt
Das trifft nur für die Java-Applets zu, aber nicht für standalone-Programme.
Edit: Möglicher Weise missverständlich: Standalone-Programme haben natürlich mit dem Browser nichts zu tun.
Generell musst Du dich entscheiden, ob dein Spiel im Browser laufen soll, dann Javascript und Canvas, sowie PHP für die Organisation, Highscore speichern etc.
Oder Du programmierst es in Java, dann hat es mit dem Web und dem Browser nichts zu tun und läuft allein lokal.
Da der Browser das Bild darstellt, verfügt er über diese Informationen und es ist mir nicht ganz klar, weshalb ich sie dann nicht auslesen kann bzw. wie ich vorgehen muss, um sie auszulesen.
Das wäre eigentlich auch kein Problem, aber die Browser blockieren das unter bestimmten Umständen aus Sicherheitsgründen, siehe "tainted canvas":
https://developer.mozilla.org/en-US/docs/Web…S_enabled_image
animation-fill-mode dürfte dir da weiter helfen:
Erst dachte ich, es kann nicht an den Namen gelegen haben, aber doch. Der Fehler liegt hier:
const totalo = this.parentNode.parentNode;
totalo = totalo.querySelector('.total'); //total = das zu löschende Textfeldconst bedeutet, dass man eine Konstante definiert, d. h. eine Variable die im weiteren Verlauf nicht geändert werden kann. Daher schlägt die Zuweisung in der zweiten Zeile fehl. Ich würde erwarten, dass das auch in der Console angezeigt wird. Hättest Du totalo mit let definiert, hätte es sicher funktioniert.
Nein, weder ist mein Code fehlerhaft, noch hast Du etwas falsch verstanden. Nur unsere Testumgebungen unterscheiden sich offenbar: Ich habe in meiner Testdatei drei Scattercharts und Du nur einen mit unterschiedlichen y-Werten. Da hast Du sehr gut mitgedacht, auf die Idee hätte ich auch selber kommen können.
Denke, jetzt verstehe ich es vollständig. Ich habe jetzt in meiner Testdatei die Zeile mit dem Löschbutton hinzu gefügt:
<table>
<tr id="zeile1">
<form name="Formular" action="">
<td><input type="text" id="Artikel" size="20"></td>
<td>
<input type="button" class="changeNr" value="-">
<input type="text" class="nr-person adult" data-factor="1" size="2" disabled="" value="1" />
<input type="button" class="changeNr" value="+">
</td>
<td>
<input type="button" class="changeNr" value="-">
<input type="text" class="nr-person child" data-factor="0.35" size="2" disabled="" value="1" />
<input type="button" class="changeNr" value="+">
</td>
<td>
<input type="text" class="per-item" disabled="disabled" value="23.95" size="5">
</td>
<td>
<input type="text" class="total" disabled="disabled" value="23.95" size="5">
</td>
<td>
<!-- <a href="javascript:blend_out('zeile1')"><input type="button" value="X" onclick="reset1()"></a> -->
<input type="button" class="delete" value="X">
</td>
</form>
</tr>
</table>Wenn ich jetzt dein Javascript aus Posting #8 nehme und nur die Namen ein wenig ändere, funktioniert es, das Eingabefeld für den Gesamtpreis wird gelöscht, wenn man das X klickt.
const delBtns = document.querySelectorAll('.delete'); //alle delete-Buttons
for (let i = 0; delBtns.length > i; i++) {
const thebutton = delBtns[i];
thebutton.addEventListener('click', function () {
const theRow = this.parentNode.parentNode;
totalo = theRow.querySelector('.total'); //total = das zu löschende Textfeld
totalo.value = 0;
Summe();
// blend_out('zeile1')
});
}Was soll denn dieser Button jetzt eigentlich tun? Das Feld für den Gesamtpreis löschen? Und ein Element unsichtbar machen. Aber welches?
Da versuche ich hinterher noch, dass irgendwie zusammenzufassen.
Besser gleich weil die Verschachtelung die Ursache dafür sein kann, dass es nicht funktioniert. Du kannst ja beide Aktionen in einem Eventhandler zusammen fassen.
Leider ist mir keine andere Lösung bekannt. Vielleicht kennt aber jemand anders eine.
Außer eine andere Programmiersprache zu verwenden wie Java. Da tut man sich dann leichter, wenn man mit lokalen Dateien arbeitet.
Ich habe schon vermutet, dass <a> ebenfalls als Elternelement zählt und deswegen noch ein parentNode drangehängt, aber das ändert auch nichts.
Eigentlich trifft das aber zu, das <a> zählt mit. Um das Ganze übersichtlicher zu machen, empfehle ich aber, die Verschachtelung von einem Button in einem <a> wegzulassen. Diese ist nicht valide und das hat seine Gründe: Was soll jetzt beim Klick ausgeführt werden, der click-Handler der Buttons oder das Javascript im href-Attribut des <a>?
Einen Webserver lokal installieren, z. B. WAMP? Davon kannst Du vielleicht auch später noch profitieren, falls Du dich mit PHP beschäftigst.
Poste am besten auch das HTML, das dazu gehört, denn davon hängt es ab, wie Du im DOM navigieren musst. Von deiner Beschreibung her müsste es funktionieren, denn this.parentNode wäre das <td> und davon das parentNode das <tr>, jedenfalls wenn das HTML so aufgebaut ist wie bisher.
aber was mir aufgefallen ist:
die zeit wird nur gezählt wenn das fenster aktiv ist.
und pro minute mit einer echten uhr läuft das script pro minute ca. 6 sek langsamer.
Beides kann man beheben, wenn man nicht einfach herauf zählt sondern die Startzeit merkt und dann die Differenz bildet, etwa so:
Ja, weiß ich, freut mich, dass dir der Name gefällt. Es ist auch eine Pflanzengattung:
Wenn's alte Jahr erfolgreich war, dann freue dich aufs neue. Und war es schlecht, ja dann erst recht.
Danke, ich wünsche ebenfalls allen Forenmitgliedern ein frohes neues Jahr!
Was Du brauchst ist ein Identifier für den Chart bzw. das Dataset, damit Du die Variablen auswählen kannst. Sehe ich mir das Ganze in der Consolausgabe an, ergibt sich, dass dies der datasetIndex ist. Damit kannst Du deine Variablen dann auswählen:
// Beispiel für die Variablen:
var var1 = 2000, var2 = 3000; var3 = 4000;
// und der Formatter:
formatter: function (value, context) {
console.log(context.datasetIndex);
switch (context.datasetIndex) {
case 1: return var1;
case 2: return var2;
case 3: return var3;
}
return value.y;
}Das ist das div mit der Klasse "nav-mobile". Es hatte schon display: inline-block; aber durch das ganze padding, width und height war es mit seinem blauen Hintergrund viel größer als das Icon.
jetzt verstehe ich nicht wie ich meine main-nav nach rechts verschiebe (also eigentlich justify-content= flex-end oder?).
justify-content= flex-end ist schon genau richtig, der Grund, warum es nicht funktioniert, ist, dass Du bei dem betr. Element nicht display: flex; gesetzt hast, daher bleibt das justify-content wirkungslos.
Außerdem geistert da noch ein float herum, das besser löschen.
Und das div.hero ist immer noch absolut positioniert und hat eine feste Breite.
Arbeite ich das alles ein, sieht es so aus:
https://codepen.io/Sempervivum/pen/abzLaYB
IMO schon viel besser.