Klik - og klik igen

Et notat om, hvordan du udløser én funktion ved et klik, og en anden funktion ved næste klik.

Notatet er en opdatering af en tidligere artikel med samme overskrift.
Dén artikel beskrev dels en lidt gammeldags måde at gøre dette på, og dels er den behæftet med en fejl, som jeg først for nylig er blevet opmærksom på.

Funktionen er her:

Vis/skjul element

Elementet blok1

Klik en gang på triggeren og elementet vises. Klik igen, og elementet forsvinder.

Det er ofte en meget nyttig funktion at have i baghånden. Jeg laver dette notat for at blive fri for hver gang at tænke igennem, hvordan det nu lige er, man gør det.

Funktionskaldet

I den tidligere version så funktionskaldet således ud:

<a href="javascript:visElement('blok1')">
Vis/skjul element</a>

Det sådan set fint nok, da vi lavede websider i henhold til HTML-standarden. Men skal websiden kodes i henhold til XHTML-standarden, går det ikke at bruge javascript:-protokollen.

I stedet bør vi bruge onclick event handleren, således at funktionskaldet nu bør udformes således:

<a href="#" onclick="visElement('blok1')">
Vis/skjul element</a>

Det kan gøres endnu mere elegant, men det er en anden historie, som de siger.

Funktionen

Funktionen er grundlæggende den samme som i den tidligere artikel, men jeg har lært lidt siden jeg skrev den første gang i foregående århundrede. Her er mit bud på en mere moderne udformning:

function visElement(objekt) {
  if (document.getElementById(objekt).style.
  -->  visibility=="visible") {
    document.getElementById(objekt).style.
    -->  visibility="hidden";
  }
  else {
    document.getElementById(objekt).style.
    -->  visibility="visible";  
  }
}

OBS! hvis du kopierer JavaScript-koden her fra siden er det bydende nødvendigt at du fjerner -->-tegnene.

I den tidligere version styrede vi betingelsen (if/else) ved hjælp af en variabel, der var true eller false (0 eller 1) alt efter om elementet var i den ene eller den anden tilstand (visible eller hidden).

Men jeg synes nu det er mere elegant simpelthen at undersøge elementets aktuelle tilstand.

“Naturtilstanden” for den blå kasse i artiklens indledning er, at værdien af visibility-egenskaben er hidden. Derfor undersøger jeg i funktionens første linie, om visibility-tilstanden er visible. Er denne betingelse ikke opfyldt, falder funktionen igennem til else, den tredie linie i funktionen, der sætter visibility-tilstanden til visible.

Er betingelsen i første linie derimod opfyldt, er elementet synligt, og derfor skjules det i den anden linie.

Den omvendte funktion

Hvis udgangs-tilstanden – der sættes i websidens stylesheet, er, at elementet er synligt, og derfor skal skjules ved det første klik og vises igen ved det andet klik – jf. boksen herunder – kan vi bruge næsten den samme funktion.

Elementet blok2

Skjul/vis element

Funktionen får nu følgende udseende:

function skjulElement(objekt) {
  if (document.getElementById(objekt).style.
  -->  visibility=="hidden") {
    document.getElementById(objekt).style.
    -->  visibility="visible";
  }
  else {
    document.getElementById(objekt).style.
    -->  visibility="hidden";  
  }
}

Display-egenskaben

Den opmærksom læser har sikkert noteret sig, at de to CSS-kasser fylder det de fylder her på siden, uanset om de er synlige eller skjulte.

Ønsker vi at fjerne et element fuldstændigt fra websiden, er det nødvendig at bruge display-egenskaben i stedet for visibility-egenskaben.

De ganske tilsvarende funktioner for denne egenskab er:

function visElement(objekt) {
  if (document.getElementById(objekt).style.
  -->  display=="block")
  {
  document.getElementById(objekt).style.
  -->  display="none";
  }
  else {
  document.getElementById(objekt).style.
  -->  display="block";  
  }
}
function skjulElement(objekt) {
  if (document.getElementById(objekt).style.
  -->  display=="none")
  {
  document.getElementById(objekt).style.
  -->  display="block";
  }
  else {
  document.getElementById(objekt).style.
  -->  display="none";  
  }
}

Betingelsesoperatoren

Er du lidt ferm til programmering i forvejen kender du måske til betingelsesoperatoren, der kan korte en if then else erklæring ned til

if (betingelse) ? instruks1 : instruks2;

Hvis betingelse er sand, udfør da instruks1, hvis betingelse ikke er sand, udfør da instruks2.

Bruger vi denne operator kan vore to funktioner skrives ganske kort:

function visElement(objekt) {
  var blok = document.getElementById(objekt).style;
  (blok.visibility == "visible") ? 
  blok.visibility="hidden" : blok.visibility="visible"; 
}
function skjulElement(objekt) {
  var blok = document.getElementById(objekt).style;
  (blok.visibility == "hidden") ? 
  blok.visibility="visible" : blok.visibility="hidden"; 
}

Denne side er senest opdateret: December 17, 2007