[ERLEDIGT] Button ausgrauen und wieder zurück ...und hovern

[colaholiker]

Guten Morgen,
in meinem Projekt zeigt die Webseite das Directory einer SD-Karte an.
Wenn ich in den Unterordnern stecke, gelange ich mit einem Button "SD-Rooot" wieder auf die oberste Ebene.

Dort, habe ich mir gedacht, könnte dann dieser Button inaktiv sein.
Das läuft. Der Code:

        function btn_ausgrauen() {
            let
            h1txt = document.getElementById('h1_id').textContent,
            a = document.getElementById('root-btn');
            if ( h1txt == 'Directory: SD' ||
                h1txt == 'Directory: SD/' ) {
                    a.style='color:darkgrey;background-color:grey;';
                    a.disabled = true;
            } else {
                    a.style='color:white; background-color:blue;';
                    //a.hover:'color:black; background-color:orange';
                    a.disabled = false;
            }
        }

Es geht um das Auskommentierte (was leider zum Absturz führt).
Der Button verliert die im CSS festgelegte Hover- Eigenschaft, und so einfach wie ich dachte, geht es wohl nicht diese wieder herzustellen.
Im Netz habe ich einige kompliziertere Ansätze gefunden mit denen ich nicht klarkomme.

- Muß wirklich eine mehr umständliche Lösung her oder hab ich einfach nicht die richtige Syntax gefunden?
-Danke-

 

[Aaron3219]

Deine auskommentierte Zeile kann allein deshalb nicht funktionieren, weil du a.hover: und nicht a.hover= benutzt. Aber selbst das wird fehlschlagen, weil a.hover schlichtweg nicht existiert.

Funktionieren würde es so:

function btn_ausgrauen() {
  let
    h1txt = document.getElementById('h1_id').textContent,
    a = document.getElementById('root-btn');
  const handleMouseHover = () => {
    a.style = 'color:black; background-color:orange';
  }
  const handleMouseOut = () => {
    a.style = 'color:white; background-color:blue;';
  }
  if (h1txt == 'Directory: SD' ||
    h1txt == 'Directory: SD/') {
    a.style = 'color:darkgrey;background-color:grey;';
    a.removeEventListener('mouseover', handleMouseHover);
    a.removeEventListener('mouseout', handleMouseOut);
    a.disabled = true;
  } else {
    a.style = 'color:white; background-color:blue;';
    a.addEventListener('mouseover', handleMouseHover);
    a.addEventListener('mouseout', handleMouseOut);
    a.disabled = false;
  }
}

Aber wie du sehen kannst, ist das alles ein wenig umständlich. Folgender Vorschlag also:

#root-btn {
  color: white;
  background-color: blue;
}

#root-btn[disabled] {
  color: darkgrey;
  background-color: grey;
}

#root-btn:not([disabled]):hover {
  color: black;
  background-color: orange;
}

<h1 id="h1_id">Directory: SD/</h1>

<button id="root-btn">
  SD-Rooot
</button>

function btn_ausgrauen() {
  const h1txt = document.getElementById('h1_id').textContent;
  const a = document.getElementById('root-btn');
  a.disabled = (h1txt === "Directory: SD" || h1txt === "Directory: SD/");
}

Bzw. Click me

Lasse bei sowas CSS zu viel wie möglich für dich arbeiten. Dafür ist CSS (Cascading Style Sheets) schließlich da: Zum Stylen.

 

[colaholiker]

Hallo Aaron,
der Javascript/CSS-Code unten funktioniert prima. "===" hab ich noch nie gesehen!

Natürlich habe ich schon einen Styling-Block im Header. Der Button wird mit 3 anderen zusammen gestylt, so daß ich den ersten Style- Ausdruck von oben weglassen konnte.
Auch daß die Funktion schlanker wird ist sehr nützlich, da der ganze Code ins Flash eines Mikroprozessors passen muß (zusätzlich zur "Nutzlast").

Vielen Dank!

 

[Aaron3219]

der Javascript/CSS-Code unten funktioniert prima. "===" hab ich noch nie gesehen!

Das ist eine Besonderheit von JavaScript im Vergleich zu anderen Programmiersprachen.

== ist eine sogenannte lose equality, während === eine sogenannte strict equality ist.

In der Praxis bedeutet das folgendes:

"1" == 1; // true
"1" === 1; // false
1 == 1; // true
1 === 1; // true
"1" === "1" // true
"1" == "1" // true

Denn lose equality ignoriert den Typen beim Vergleich, also den Integer (Nummer) 1 und den String (Zeichenkette) "1", während bei strict equality beide Vergleichsoperatoren vom selben Typen sein müssen. Dort resultieren Vergleiche wie 100 === "100" also in false, denn der Integer 100 ist nicht vom selben Typ wie der String "100".

Generell solltest du immer so explizit wie möglich vergleichen, um eventuelle Fehler auszuschließen. Nutze also, sofern möglich (und das ist eigentlich immer der Fall), strict equality (===).

Falls du noch mitkommst, beschäftige dich in dem Zuge doch mal mit automatic type conversion.

 

[colaholiker]

So ist das also mit den 3 Muscheln ;-)

Tolle Sache, wenn man "lose equality" bewußt nutzen möchte. Aber Du hast recht, besser immer genau programmieren. Und daher werde ich meinen Code nochmal durchgehen.

Um W3schools kommt man nicht herum wenn man im Netz recerchiert, daher war ich schon oft dort. Die verlinkte Seite zeigt sehr gut die Menge an Wissen die dort abrufbar ist (auch andere Programmiersprachen). Ich bin bald zu "switch" abgedriftet weil ich schon seit einiger Zeit wissen wollte, ob man "cases" zusammenfassen kann (zB. "case a,b:").
Aha: mit "default" ist es richtig!

Es gibt so viel... und ich baue ja nur an meinem Projekt, einen Mikroprozessor mit SD-Karte vom Browser aus zu verwalten.
Danach kommen aber Webseiten auf dieser SD-Karte dran. Und ich habe 35GB Platz!