Forkorte kode?

<ole>

Der kan være flere tilgange - bedre - mere overskuelige - men ikke nødvendigvis væsentligt kortere  =)

Event handlers bør ikke 'sættes' på et element, men 'tilføjes'. Når du gør som i koden ovenfor, overskriver du evt. andre handlers på elementet.

"Jamen, der skal kun være den ene handler, Ole". Ja, ligenu, men du ved ikke, hvad du eller en anden vil udbygge koden med om et halvt år.

Derfor bruger man metoden ELEMENT.addEventListener, men IE kræver stadig sin egen ELEMENT.attachEvent. Du kan i stedet bruge følgende konstruktion, hvor variablen setEvent sættes til den understøttede handler setter, når siden loader:


Herefter har følgende to forslag til en anden måde at gøre tingene på. Først en procedural, som minder mest om den måde, du koder på nu:


- og en mere object orienteret:



/mvh
</bole>

Det er meget fornemt.

Tak takker for lektionen og anmoder om et svar :-)

Jeg kom til at tænke hvad man kan gøre, hvis man nu vil have nogle af de her farve-div (som du sikkert har regnet ud jeg har) til at være aktive fra start?

Hmm...

Du kunne gøre sådan ved instantieringen af objekterne, hvis du bruger OO-versionen:

var aClickables = {};

for (var i=1; i<4; i++) aClickables["color"+i] = new ClickableElement("color"+i);

aClickables.color2.toggle();

Ups ... forkert BB-kode  :D

- og jeg samler ikke points. Du lægger bare selv et svar og accepterer det, så tråden lukkes. Men tak for tilbudet  =)

Når jeg prøver at implementere den, er jeg så heldig at få en fejl:

[code]caught TypeError: Cannot read property 'value' of undefined [/code]

Er der noget der ikke er initialiseret eller hvordan skal det tolkes?

Argh, det må være fordi jeg har forsøgt at modificere den med min egen slamkode...

ClickableElement.prototype.toggle = function(){
    var color = this.elm.getAttribute("name");
    if (!this.active) {
        document.search.colors.value += color+",";
    } else {   
        var n = document.search.colors.value.indexOf(color+",");
        if (n >= 0) {
            document.search.colors.value = document.search.colors.value.replace(color+",","");
        }       
    }
    this.elm.style.border = this.active ? 0 : "2px solid #333";
    this.active = !this.active;
}

Hvad skal der helt præcist ske?

Jeg ønsker at have et hidden input-felt med navne på valgte farver. Hver div har en navne-attribut såsom "RED", "BLACK". Dette skjulte input felt skal så opdateres når man til- eller fravælger farver.

Ideen med det skjulte input felt er at jeg vil have sendt de valgte farver med over GET.

Giver det mening? :)

Så kunne en samlet løsning se sådan ud:


Så slår du også kun elementets farve op én gang - nemlig ved instantieringen af dets klikbare objekt. De valgte farver holder jeg gemmer jeg i objektet oColors - og jeg smider dem først i formen på dennes onsubmit event

Håber, du får mening ud af den lidt vrøvlede forklaring. Sådan kan det gå, når man prøver at rette et indlæg for at gøre det mere klart  *LoL*

Ups ... fejl! Sådan skal objektets værdier gemmes:

Det ser snedigt ud. Jeg får dog et problem. Den her linje kode kaster en fejl fra sig:

aClickables.color1.toggle();

Fejlen er: Uncaught TypeError: Cannot call method 'toggle' of undefined

Lige for at der ikke skal være tvivl, så min kode således ud nu:

________________________________________________

<script type="text/javascript">

var setEvent = (function(){
    if (window.addEventListener) return function(elm, sType, fn) {
        elm.addEventListener(sType, fn, false);
    };
    return function(elm, sType, fn) {
        elm.attachEvent("on"+sType, fn);
    };
})();

var aClickables = {},
oColors = {};
function formSubmitActions(elmForm) {
    var x, a = [];
    for (x in oColors) a.push(x);
    elmForm.colors.value = a.join(",");
}
function ClickableElement(sId) {
    var me = this;
    this.elm = document.getElementById(sId);
    this.elm.style.cursor = "pointer";
    this.active = false;
    this.color = this.elm.getAttribute("name");
   
    setEvent(this.elm, "click", function(){me.toggle()});
}
ClickableElement.prototype.toggle = function(){
    if (this.active) {
        this.elm.style.border = 0;
        oColors[this.color] = 1;
        alert(oColors);
    } else {
        this.elm.style.border = "2px solid #333";
        delete oColors[this.color];
    }
    this.active = !this.active;
}

for (var i=1; i<4; i++) new ClickableElement("color"+i);

aClickables.color1.toggle();

</script>

<form method="get" action="result.php" name="search" onsubmit="formSubmitActions(this)">

<input type="hidden" name="colors" value="" />
....
<input type="submit" value="Submit" />
</form>

<div id="color1" name="WHITE" style="margin: 5px; width: 20px; height: 20px; background-color: #FFFFFF"></div>
<div id="color2" name="CREAM" style="margin: 5px; width: 20px; height: 20px; background-color: #F2EAC6"></div>
<div id="color3" name="YELLOW" style="margin: 5px; width: 20px; height: 20px; background-color: #F8E275"></div>

_____________________________________

Jeg synes dog heller ikke jeg modtager noget i min querystring. Jeg forventer noget ala ?colors=BLACK,RED....

Hmm, mon jeg gør noget forkert?

Der er flere issues. For det første havde jeg goofed noget af koden op - og skrevet den uden at teste noget. Sorry  =)

Du kan i følge standarden ikke bruge en name attribut på et DIV. Brug i stedet en CSS-klasse. Det gør også din HTML-kode slankere.

Når du instantierer dine klikbare objekter (kører for løkken), skal elementerne være skrevet ud til browseren. Da den læser koden ligesom du og jeg, kan du ikke kalde elementer fra et JavaScript, som står skrevet før elementerne. De er så at sige ikke født endnu og kan derfor ikke høre, når du kalder på dem.

Du skal altså enten skrive koden under elementernes HTML-kode, eller - som jeg vil anbefale - kalde en funktion på sidens onload event. Den funktion instantierer så objekterne.

Her er et testet forslag  =)


Script og stylesheet skriver du så i HEAD elementet. Stylesheets skal stå i HEAD, mens scripts også må stå i BODY. Af vedligeholdelses grunde kan det dog godt betale sig at skrive det hele i HEAD - og meget gerne som importerede filer

Læg i øvrigt mærke til, at jeg bruger JSON.stringify til at alerte objektet med. Nice feature til det formål  *o)

Derudover kan du importere jQuery i dokumentet og skrive en kode, som er en hel del mindre. Det lærer du bare ikke en dyt JavaScript af.

Når du er blevet rigtig god til JS, kan du med fordel bruge libraries som YUI eller jQuery - for så kan du gennemskue, hvornår og hvordan det er fornuftigt at bruge en library metode, og hvornår det ikke er. Samtidig kan du skrive din egen, alternative kode.

End ikke de mest avancerede snedkermaskiner kan lave et mahognibord i professionel standard til dig, hvis du ikke ved, hvordan man laver et bord. Uanset, hvor god du er til at programmere maskinerne  =)

Jeg siger endnu engang tak for lektionen. Det har givet blod på tanden :)

Jeg tror dog aldrig rigtig jeg bliver gode venner med javascripts fejlbeskeder. De fortæller da absolut ingenting om hvor i koden den er gal.

En sidste ting jeg kunne overveje at implementere: så snart man klipper på en farve, så skal den kalde submit(). Ville det være svært at sætte ind i koden?

Ellers kan det også være vi skal til at afslutte denne tråd - du har jo svaret på mit oprindelige spørgsmål for lang tid siden :-)

Klikker* på en farve

Hvis formen skal submitte, så snart du klikker på en farve, er det vel ikke nødvendigt at indsamle de farver, der klikkes på(?)

Tjo, for som jeg spurgte tidligere om, så skal der være nogle af farverne der er markerede fra start. De bliver jo sendt med GET og derfor kan jeg sætte dem som markeret fra start hvis en farveværdi indgår i query-stringen :)

Prøv at skrive scriptet om til noget i denne stil. Så diskriminerer du mellem 'interne' kald til click handleren (fra elementerne selv) - og 'eksterne' (når du sætte de default valgte):

Sorry, nej det duer heller ikke. Det vil kun virke, hvis der var tale om form elementer. Løsningen skal skrives om til noget andet, men jeg er på vej ud af døren, så det bliver i hvertfald ikke nu