[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.

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.