Button auflösen

[Tim]

Hallo, Ich bin Anfänger und versuche ein kleines Spiel zu programmieren. Weiss jemand wie man einen Knopf erstellt der nur beim ersten Klick funktioniert?

Danke im Voraus für die Hilfe. Tim

[dedlfix]

Tach!

Weiss jemand wie man einen Knopf erstellt der nur beim ersten Klick funktioniert?

Im Eventhandler die Eigenschaft disabled auf true setzen.

dedlfix.

[Gunnar Bittersmann]

@@Tim

Ich bin Anfänger und versuche ein kleines Spiel zu programmieren. Weiss jemand wie man einen Knopf erstellt der nur beim ersten Klick funktioniert?

So wie der Minus-Knopf unter deinem Posting.

Wenn ich draufdrücke, funktioniert der beim ersten Klick. Beim zweiten sagt er, ich dürfte nur einmal …

Na gut, ich werd mal nicht so sein und nicht drücken. Aber etwas mehr Input (d.h. Output von dir) wäre schon gut, um auf deine Frage antworten zu können.

Du könntest den Button auf disabled setzen. Dann ist er weiterhin zu sehen (ausgegraut), aber ohne Funktion.

Oder den Button auf hidden setzen, dann ist er nicht mehr zu sehen.

Oder den Button ganz aus dem DOM entfernen.

LLAP 🖖

[Linuchs]

Oder den Button ganz aus dem DOM entfernen.

Bitte erkläre den Kunstgriff, wie der dann beim ersten Klick funktioniert.

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Oder den Button ganz aus dem DOM entfernen.

Bitte erkläre den Kunstgriff, wie der dann beim ersten Klick funktioniert.

Das ist keine Kunst, sondern nur gutes Timing: den Button in der Eventbshandlung des ersten Klicks – also nach diesem – aus dem DOM entfernen.

LLAP 🖖

[dedlfix]

Tach!

Das ist keine Kunst, sondern nur gutes Timing: den Button in der Eventbshandlung des ersten Klicks – also nach diesem – aus dem DOM entfernen.

Warum "nach" und nicht während?

dedlfix.

[Gunnar Bittersmann]

@@dedlfix

Warum "nach" [dem Klick] und nicht während?

Definiere „Klick“!

Im Sinne von JavaScript-Event ist Klick ein Zeitpunkt; da ist nichts mit „während“.

LLAP 🖖

[dedlfix]

Tach!

Warum "nach" [dem Klick] und nicht während?

Moment, ich habe nicht Klick gemeint, sondern die Eventbehandlung.

den Button in der Eventbehandlung des ersten Klicks – also nach diesem – aus dem DOM entfernen

Ich habe den Satz so gelesen, als ob der Einschub sich auf den Eventhandler bezieht. Tut er natürlich nicht, sondern auch der Grammatik nach auf den Klick. Also Missverständnis meinerseits. Aber ...

Definiere „Klick“!

Im Sinne von JavaScript-Event ist Klick ein Zeitpunkt; da ist nichts mit „während“.

Klick ist ein Zeitpunkt aus Anwendersicht. Aus Programmierersicht spielt der jedoch keine Rolle. Man bekommt einen Aufruf des Eventhandlers. Zu dem Zeitpunkt ist der Klick bereits seit ein paar Takten Geschichte. Man befindet sich an der Stelle, an der man reagieren kann, bereits im Danach. Insofern ergab es für mich keinen Sinn, das "nach dem Klick" zu betonen, und so hab ich das auf den Eventhandler bezogen, was dann auch nicht so recht ins Bild passen wollte. Aber gut, du wolltest wohl dem etwas leger formulierten "beim ersten Klick" etwas entgegensetzen.

dedlfix.

[JürgenB]

Hallo,

Oder den Button ganz aus dem DOM entfernen.

Bitte erkläre den Kunstgriff, wie der dann beim ersten Klick funktioniert.

z.B. so:

button = document.querySelector("button");
button.addEventListener("click",function() {
  this.parentNode.removeChild(this);
}); 

Pen: https://codepen.io/anon/pen/eLpXyV

Gruß
Jürgen

[Orlok]

Hallo Jürgen

button.addEventListener("click", function() {
  this.parentNode.removeChild(this);
}); 

Ich würde es vorziehen, das Elternelement explizit mit parentElement anzusprechen. Das einzige Element in einem Dokument, das kein Elternelement besitzt, ist das html-Element und wolltest du das entfernen, könntest du auch direkt document als dessen Elternknoten referenzieren. Die Eigenschaft parentNode würde ich nur dann verwenden, wenn es sich um ein DocumentFragment handelt.

Das heißt nicht, das parentNode hier falsch ist, aber warum im Ungefähren bleiben, wenn man sich auch präzise ausdrücken kann? Der Ausdruck ist aber selbst mit parentElement an Stelle von parentNode unnötig umständlich. Es gibt nun schon seit einer ganzen Weile die Schnittstelle ChildNode, die unter anderem von der Schnittstelle Element implementiert wird und die eine Methode mit dem Namen remove enthält:

button.addEventListener('click', () => button.remove())

Damit kann ein Element auch ohne Umweg über seinen Elternknoten entfernt werden. In so ziemlich allen heute relevanten Browsern. Abgesehen vom Internet Explorer natürlich. Wer den auch noch mitnehmen will, braucht ein Polyfill, aber das ist leicht gebastelt. Der Code ist der gleiche wie in deinem Beispiel oben:

/* Polyfill for ChildNode.remove */

[
    CharacterData.prototype,
    DocumentType.prototype,
    Element.prototype

].forEach(function(prototype) {

    if (!prototype.hasOwnProperty('remove')) {

        prototype.remove = function() {
            this.parentNode && this.parentNode.removeChild(this)
        }

    }
})

Davon abgesehen gibt es noch ein paar weitere nützliche Methoden, die von ChildNode bereitgestellt werden. Für den Fall das es dich interessiert und du noch nicht damit vertraut bist:

Mit der Methode before kann eine beliebige Anzahl Knoten direkt vor einem Kindknoten eingefügt werden. Das hat man früher mit insertBefore^[1] ja auch über den jeweiligen Elternknoten gemacht, wobei immer nur ein Knoten eingefügt werden konnte.

childNode.before(element1, element2, 'text1', 'text2')

Genau so wie bei der Schwestermethode after werden als Argument übergebene Strings automatisch in Textknoten umgewandelt. Das ist also dasselbe, als würde man in dem Beispiel oben document.createTextNode oder new Text mit den Strings aufrufen.

childNode.replaceWith(element1, element2, 'text1', 'text2')

Auch für das Ersetzen gibt es nun eine variadische Funktion, die direkt auf dem Knoten aufgerufen werden kann, der aus dem DOM entfernt werden soll. Das ist komfortabler zu bedienen, als replaceChild auf dem Elternknoten aufzurufen.

Viele Grüße,

Orlok

---

---

1. Oder halt mit insertAdjacentElement oder insertAdjacentText, wenn das Kontextobjekt ein Element war und wenn man sich merken konnte, welcher String als Positionsparameter anzugeben ist. – In diesem Fall 'beforebegin' oder 'afterend' als erstes Argument, für das Einfügen direkt vor oder direkt nach dem jeweiligen Element. ↩︎

[Matthias Apsel]

Hallo Gunnar Bittersmann,

So wie der Minus-Knopf unter deinem Posting.

Wenn ich draufdrücke, funktioniert der beim ersten Klick. Beim zweiten sagt er, ich dürfte nur einmal …

Nein, beim zweiten Klick nimmst du die Bewertung zurück.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Wenn ich draufdrücke, funktioniert der beim ersten Klick. Beim zweiten sagt er, ich dürfte nur einmal …

Nein, beim zweiten Klick nimmst du die Bewertung zurück.

Hm, ich hätte doch testen sollen. 😉

LLAP 🖖