smiley-funktion

Lidt svært at se nu, men "pilen" er ved linjen:
-> document.write('<img src="smiley4.png" title="Ked af det" onclick="'); document.write("tilfoej(':'(');"); document.write

Det er forståeligt hvis du har problemer med appostrofer og gåseøjne i den omgang dér ;)

Et godt råd er nok at gøre koden lidt mere overskuelig ved brug af objekter og funktioner. Kommentarer er også altid et hit, især når koden skal læses af andre.

Herunder kommer et lille eksempel på hvad jeg mener:

/*
* Smileys: Creates images of smileys and appends them to the div with id sDiv.
*                     Adds onclick handlers for the images so clicking them will set the
*                     value of the textarea with id sTextArea to the string representation
*                     of the smiley.
* @param {String} sTextArea: ID of a textarea element.
* @param {String} sDiv: ID of a div element.
*/
var Smileys = function (sTextArea, sDiv) {
    //Get the div object.
    var oDiv = document.getElementById(sDiv);
    //Get the textarea object.
    var oTextArea = document.getElementById(sTextArea);
    //Initialize the smiley array.
    var aSmileys = new Array();
   
    /*
    * Smiley: Constructor for Smiley objects. Groups the image url, smiley type and
    *                 string representation in one object. Adds onclick event handler that
    *                 makes use of oTextArea for output.
    * @Constructor
    * @param {String} sUrl: Url of the smiley image.
    * @param {String} sTitle: Type of smiley.
    * @param {String} sStringRep: String representation of smiley.
    * @param {DOM Element} oTextArea: A textarea element.
    */
    function Smiley(sUrl, sTitle, sStringRep, oTextArea) {
        /*
        * getUrl: Accessor method.
        * @return the value of the private variable sUrl.
        */
        this.getUrl = function() {
            return sUrl;
        };

        /*
        * getTitle: Accessor method.
        * @return the value of the private variable sTitle.
        */       
        this.getTitle = function() {
            return sTitle;
        };
       
        /*
        * getStringRep: Accessor method.
        * @return the value of the private variable sStringRep.
        */
        this.getStringRep = function() {
            return sStringRep;
        };
       
        /*
        * onClickHandler: Private function for handling onclick events in the context of "this" smiley.
        */
        var onClickHandler = function() {
            //Set the value of the text area to this smileys string representation.
            oTextArea.value = sStringRep;
        };
       
        /*
        * setOnClickHandler: Sets the onclick handler of this smileys image element
        *                                         to be called in the context of "this" smiley.
        */
        this.setOnClickHandler = function(oSmileyImg) {
            oSmileyImg.onclick = function() {onClickHandler.call(this);};
        };
    }
   
    /*
    * toElement: Creates a DOM image element representing this smiley.
    * @return a DOM image element.
    */   
    Smiley.prototype.toElement = function() {
            //Create the image element.
            var oSmileyImg = document.createElement("IMG");
            //Set the src attribute.
            oSmileyImg.setAttribute("src", this.getUrl());
            //Set the title attribute
            oSmileyImg.setAttribute("title", this.getTitle());
            //Set the alt attribute
            oSmileyImg.setAttribute("alt", this.getStringRep());
           
            //Add the onclick handler.
            this.setOnClickHandler(oSmileyImg);
            return oSmileyImg;
        };
       
    //Add smileys to the smiley array.
    aSmileys.push(new Smiley("Smiley1.png", "Smiler", ":)", oTextArea));   
    aSmileys.push(new Smiley("Smiley2.png", "Blinker", ";)", oTextArea));
    aSmileys.push(new Smiley("Smiley3.png", "Rækker tunge", ":P", oTextArea));
    aSmileys.push(new Smiley("Smiley4.png", "Ked af det", ":'(", oTextArea));
    aSmileys.push(new Smiley("Smiley5.png", "Rødmer", ":I", oTextArea));
    aSmileys.push(new Smiley("Smiley6.png", "Vred / skuffet", ":(", oTextArea));
    aSmileys.push(new Smiley("Smiley7.png", "Kærlighed", "(L)", oTextArea));
    aSmileys.push(new Smiley("Smiley8.png", "Uskyldig", "8)", oTextArea));
    aSmileys.push(new Smiley("Smiley9.png", "Overrasket", ":O", oTextArea));
    aSmileys.push(new Smiley("Smiley10.png", "Træt", "I)", oTextArea));
    aSmileys.push(new Smiley("Smiley11.png", "Ler", ":D", oTextArea));
   
    //Append smiley elements to the div element.
    for (var i = 0; i < aSmileys.length; i++) {
        oDiv.appendChild(aSmileys[i].toElement());
    }   
}

Okey - nu er det jo bare ikke helt det samme, da der både er Textarea og div; hvorfor?
Og, er det ikke muligt at istedet hente fra navn end id? (getelementbyname) ?

Div'en giver bedre mulighed for at placere smileys'ene hvor du vil have dem. Alternativt kan du bare bruge body elementet i stedet.

Du kan selvfølgelig bruge document.getElementsByName(sSomeName)

Den returnerer bare et array da name ikke behøver at være unik. Dvs., du er i princippet ikke sikker på at få fat på det textArea du gerne vil have. Du er faktisk ikke engang garanteret at det er et textarea.

Et elements id er unikt, så derfor returnerer den kun ét element.

Okey, så må jeg jo bruge id - men har rettet lidt i koden, for bl.a. at fjerne det med div, da den ikke skal til at bruge div, men bare sætte ind, hvor id er "id".. Men der er fejl, og kan se, at bunden heller ikke er helt god til det. Noget du måske kan rette? (:

-----------------------------------------------------
var Smileys = function (sId) {
var oTextArea = document.getElementById(sId);
var aSmileys = new Array();

function Smiley(sUrl, sTitle, sStringRep, oTextArea) {
this.getUrl = function() {
return sUrl;
};

this.getTitle = function() {
return sTitle;
};

this.getStringRep = function() {
return sStringRep;
};

var onClickHandler = function() {
//Set the value of the text area to this smileys string representation.
oTextArea.value = sStringRep;
};

this.setOnClickHandler = function(oSmileyImg) {
oSmileyImg.onclick = function() {onClickHandler.call(this);};
};
}

Smiley.prototype.toElement = function() {
var oSmileyImg = document.createElement("IMG");
oSmileyImg.setAttribute("src", this.getUrl());
oSmileyImg.setAttribute("title", this.getTitle());
oSmileyImg.setAttribute("alt", this.getStringRep());

this.setOnClickHandler(oSmileyImg);
return oSmileyImg;
};

aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/smiling.png", "Smiler", ":)", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/winking.png", "Blinker", ";)", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/stickingtongue.png", "Rækker tunge", ":P", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/crying.png", "Ked af det", ":'(", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/embarassed.png", "Rødmer", ":I", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/frowning.png", "Vred / skuffet", ":(", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/inlove.png", "Kærlighed", "(L)", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/innocent.png", "Uskyldig / genert", "8)", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/surprised.png", "Overrasket", ":O", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/yired.png", "Træt / søvning", "I)", oTextArea));
aSmileys.push(new Smiley("http://sponto.dk/VuX/smileys/laughing.png", "Griner", ":D", oTextArea));

for (var i = 0; i < aSmileys.length; i++) {
oDiv.appendChild(aSmileys[i].toElement());
}
}

Jeg er ikke umiddelbart helt sikker på hvad det er du vil?

Så vidt jeg kan se er eneste forskel på funktionaliteten af din og min kode at min skriver til en div, som kan placeres hvor som helst i dokumentet, og din skriver i bunden af dokumentet?

I min kode bliver billederne for smileys'ene udskrevet i sidste linje:

for (var i = 0; i < aSmileys.length; i++) {
  oDiv.appendChild(aSmileys[i].toElement());
}

I stedet for oDiv kan du jo bruge body elementet i stedet...det skulle give nøjagtig samme funktionalitet som du har i din egen kode...eller misser jeg et eller andet?

Et eller andet går jo hvert fald galt - har erstattet oDiv med body til sidst, men den siger at et objekt var ventet.

Jeg kalder funktionen sådan: <script type="text/javascript">smileys('besked');</script>

Smiley er jo et object, så du skal bruge new Smiley("besked") i stedet.

Jeg prøvede med document.body i stedet for odiv og det virkede fint.

Æh, Smiley er ikke et "object", men en "object-construktor"...

Det er godt nok ved at være sent :?

Det skal selvfølgelig være new Smileys("besked"); i stedet! Der manglede lige et s. Huske også at starte med stort S. Javascript er case-sensitive.

Okey - nu kommer den med fejlen, at body ikke er defineret. Jeg gør således:
for (var i = 0; i < aSmileys.length; i++) {
body.appendChild(aSmileys[i].toElement());
}

Som jeg skrev lidt længere oppe skal du bruge document.body for at få fat i body elementet.

Okey, men hm.. Nu kommer den med sådan en fejl, om at siden ikke kan læses, og handlingen dermed bliver afbrudt - så kommer den til fejlsiden med "Siden kan ikke vises.." ..

Det her virker hos mig.

Fil 1: defaultScript.js

/*
* Smileys: Creates images of smileys and appends them to the div with id sDiv.
*                     Adds onclick handlers for the images so clicking them will set the
*                     value of the textarea with id sTextArea to the string representation
*                     of the smiley.
* @param {String} sTextArea: ID of a textarea element.
* @param {String} sDiv: ID of a div element.
*/
//var Smileys = function (sTextArea, sDiv) {
var Smileys = function (sTextArea) {
    //Get the div object.
    //var oDiv = document.getElementById(sDiv);
    //Get the textarea object.
    var oTextArea = document.getElementById(sTextArea);
    //Initialize the smiley array.
    var aSmileys = new Array();
   
    /*
    * Smiley: Constructor for Smiley objects. Groups the image url, smiley type and
    *                 string representation in one object. Adds onclick event handler that
    *                 makes use of oTextArea for output.
    * @Constructor
    * @param {String} sUrl: Url of the smiley image.
    * @param {String} sTitle: Type of smiley.
    * @param {String} sStringRep: String representation of smiley.
    * @param {DOM Element} oTextArea: A textarea element.
    */
    function Smiley(sUrl, sTitle, sStringRep, oTextArea) {
        /*
        * getUrl: Accessor method.
        * @return the value of the private variable sUrl.
        */
        this.getUrl = function() {
            return sUrl;
        };

        /*
        * getTitle: Accessor method.
        * @return the value of the private variable sTitle.
        */       
        this.getTitle = function() {
            return sTitle;
        };
       
        /*
        * getStringRep: Accessor method.
        * @return the value of the private variable sStringRep.
        */
        this.getStringRep = function() {
            return sStringRep;
        };
       
        /*
        * onClickHandler: Private function for handling onclick events in the context of "this" smiley.
        */
        var onClickHandler = function() {
            //Set the value of the text area to this smileys string representation.
            oTextArea.value = sStringRep;
        };
       
        /*
        * setOnClickHandler: Sets the onclick handler of this smileys image element
        *                                         to be called in the context of "this" smiley.
        */
        this.setOnClickHandler = function(oSmileyImg) {
            oSmileyImg.onclick = function() {onClickHandler.call(this);};
        };
    }
   
    /*
    * toElement: Creates a DOM image element representing this smiley.
    * @return a DOM image element.
    */   
    Smiley.prototype.toElement = function() {
            //Create the image element.
            var oSmileyImg = document.createElement("IMG");
            //Set the src attribute.
            oSmileyImg.setAttribute("src", this.getUrl());
            //Set the title attribute
            oSmileyImg.setAttribute("title", this.getTitle());
            //Set the alt attribute
            oSmileyImg.setAttribute("alt", this.getStringRep());
           
            //Add the onclick handler.
            this.setOnClickHandler(oSmileyImg);
            return oSmileyImg;
        };
       
    //Add smileys to the smiley array.
    aSmileys.push(new Smiley("Smiley.png", "Smiler", ":)", oTextArea));   
    aSmileys.push(new Smiley("Smiley.png", "Blinker", ";)", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Rækker tunge", ":P", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Ked af det", ":'(", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Rødmer", ":I", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Vred / skuffet", ":(", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Kærlighed", "(L)", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Uskyldig", "8)", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Overrasket", ":O", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Træt", "I)", oTextArea));
    aSmileys.push(new Smiley("Smiley.png", "Ler", ":D", oTextArea));
   
    //Append smiley elements to the div element.
    for (var i = 0; i < aSmileys.length; i++) {
        //oDiv.appendChild(aSmileys[i].toElement());
        document.body.appendChild(aSmileys[i].toElement());
    }   
}

Fil 2: default.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/>
        <link type="text/css" rel="stylesheet" href="defaultStyle.css" />
        <script type="text/javascript" src="defaultScript.js"></script>
        <title>Various tests</title>
    </head>
    <body>
        <!--<div id="smileyDiv"></div>-->
        <textarea id="textArea"></textArea>
        <script type="text/javascript">
            //new Smileys("textArea", "smileyDiv");
            new Smileys("textArea");
        </script>
    </body>
</html>

Bemærk lige at du skal ændre navnene på smiley.png. Jeg har bare testet med det samme billede...

Argh, hvor irriterende .. den kommer stadig med den fejlmeddelelse og skifter til "Kan ikke vises"-siden..

Hmm, den var værre...det virker jo fint med ovenstående hos mig så det er svært at hjælpe. Prøv at fjerne script-linjerne (begge 2). Så er det jo bare rent html. Prøv så om du kan indlæse default.html.

Kører du det igennem iis på localhost, eller åbner du bare default.html lokalt?

På en server - underligt, når jeg opretter det i sådan en alm. fil (default.html), og bare laver den kode du har skrevet, så virker det fint - men i de andre sider er en gal.. Hvad kan det mon skylles? : s

.. men i de andre sider er den gal.. Hvad kan det mon skyldes* :)

Nåeh, fik ordnet det vha. af at lave en div, og så bare smide det deroveri.. Således:

document.write('<div id="oDiv"></div>');

//Append smiley elements to the div element.
for (var i = 0; i < aSmileys.length; i++) {
//oDiv.appendChild(aSmileys[i].toElement());
oDiv.appendChild(aSmileys[i].toElement());
}
}

- Nu er mit eneste problem; den lægger ikke bare smileykoden ind i kassen, den erstatter dens indhold med den.. altså, man kan ikke have skrevet noget, og så trykke på en smiley.. så nulstiller den kassen til KUN den smileykode..

Vil du have den til at udskrive smileyen i slutningen af textArea?

I så fald kan du jo bare erstatte linjen:

oTextArea.value = sStringRep;

med

oTextArea.value += sStringRep;

eller evt. med et mellemrum foran

oTextArea.value += " " + sStringRep;


...

Jeg kom til at tænke på at dine problemer evt. kan skyldes at dokumentet ikke var færdig loaded da du brugte metoden. I så fald kan du nemlig ikke få fat på dokument.body...

Okey - tak.. :)

Hvordan får jeg lavet et lille mellemrum mellem hver smiley? altså, de kommer bare lige efter hinanden uden så meget som 1px mellemrum..

...