onClick zuweisen

[TriphunEM]

Hallo,

ich erstelle ein Element so:

        objImage = document.createElement('img');
        objImage.setAttribute('id','Die ID');
        objImage.setAttribute('src','icons/button.gif');
        objImage.setAttribute('style','border:1px solid #F7F7F7;');
        objImage.onclick = function() { alert('Irgendwas') };

        objDiv.appendChild(objImage);

kann mir mal bitte einer erklären, warum das onClick-Event bei erstellen des Objekten schon ausgeführt, und nicht erst wenn ich dann mal dadrauf klicke?

Danke

[Wyveres]

Oo? Müsste das onclick event nicht erst erstellt werden nachdem du das element in den DOM baum gehangen hast.

imho

       objImage = document.createElement('img');
        objImage.setAttribute('id','Die ID');
        objImage.setAttribute('src','icons/button.gif');
        objImage.setAttribute('style','border:1px solid #F7F7F7;');
        objDiv.appendChild(objImage);
z.b.:

        document.getElementById('Die ID').onclick = function() { alert('Irgendwas') }

[TriphunEM]

Jo, danke! So hauts hin...nachvollziehen kann ich es zwar nicht unbedingt, aber naja...

[Wyveres]

Ganz einfach, Du versuchts das onclick event in ein noch nicht im DOM Baum vorhandenes Element anzuwenden.


laut meinem verständnis kann man onclick erst dann anwenden wenn das Element im DOM vorhanden ist.

über welche methode du das machst is dir überlassen JS hat sich dort nicht so. Nur muss das Element schon vorhanden sein, dass es kreiert ist reicht dort nicht aus.



aber da sich dein Problem ja in luft aufgelöst hat ^^

[TriphunEM]

naja, dann komm ich zum nächsten!

document.getElementById('element').onclick = function() { this.funktion(variable) };

wie kann ich hierbei variablen an die funktion weiterleiten?
ich brauch die instanz this und die variable da drin!

wenn ich

document.getElementById('element').onclick = this.funktion(variable);

mache, hab ich das gleiche Problem wie oben. Wird einfach ausgeführt.

[Wyveres]

ähm also erstmal AUTSCH :P

2tens ...

warum benutzt du nicht google ?

3tens
a) ist function ein reserviertes WORT ! nur um das mal Festzuhalten.

document.getElementById('element').onclick = this.funktion(variable);

ein wunder das er überhaupt was tut. PS fehler Console von FireFox und oder FireBug sollten die beim richtigstellen von JS müll helfen können.

4tens ... und dann such erstmal im web ausführlich.

document.getElementById('element').onclick = funktion(){
alert(this.innerHTML);
}

ich hab mir mal sagen lassen das sowas gegehen soll

EDIT:

---

achja bevor ich das vergesse ... this bezieht sich immer auf das Element von dem der event ausgeführt wird.

---

[TriphunEM]

zu 2.) Ich benutz immer zu erst Google, denn Google ist mein Freund! Aber er kann mir auch nicht immer helfen, denn formulier mal ein Frage dazu!

zu 4.) Das weiß ich auch. Ich nutz nur die Fehlerkonsole von FF und bekomm ein Fehler, aber eben diesen um den es geht.

So sieht die Zeile aus:

        document.getElementById('btn_'+arrCommands[i][0]).onclick = function() { alert('btn_'+arrCommands[i][0]); }

arrCommands ist ein Array, was ich für ein dynamisches Ansprechen eines Elementes brauch. Hier mal zum Test, nur ein Alert ausgegeben!

Der Fehler ist arrCommands hat keine Eigenschaften, was daran liegt das es arrCommands in der function() {} nicht gibt. Bloß wie übergebe ich es dahin? Da konnte mir Google bis jetzt auch nicht helfen!
Ich will auch keine globale Variable anlegen, weil das ganze zum Schluß ein Aufruf eines Objektes werden soll.

Und das this auf das Element zeigt weiß ich selber, aber um das geht es hier grad nicht ;O)

[Wyveres]

http://ejohn.org/projects/flexible-javascript-events/

vieleicht hilft dir das weiter wenn nicht zeig mal ein wenig mehr Script Code und erklär mal genauer was du damit eigentlich machen willst.

[TriphunEM]

Naja, nicht wirklich, dort ist das Problem ja auch immer noch.


Ich will ein WYSIWYG-Editor bauen. Das Problem ist unter dem Kommentar "Buttons definieren".

document.getElementById('btn_'+arrCommands[i][0]).onclick = function() {
            this.doExecCommand(strName+'_iframe',arrCommands[i][0],arrCommands[i][1],arrCommands[i][2]);
        } 

Es soll die Funktion "fbEditor.prototype.doExecCommand = function(elementId,command,param1,param2)" aufgerufen werden, aber wie gesagt ich hab kein Zugriff auf arrCommands!

Also hier mal der Code:

// HTML
editor = new fbEditor(
   'theEdit',
   '100%',
   '250px',
   '<h1>Vordefiniert</h1>'
);

// JAVASCRIPT

var useBrowser;

function fbEditor(strName, intWidth, intHeight, strValue)
{

    var objSelf = this;
    var arrCommands = new Array();
    var intArrIdx = -1;

    // Kommandos definieren
    intArrIdx++; arrCommands[intArrIdx] = new Array('bold',false,null,'Fett');
    intArrIdx++; arrCommands[intArrIdx] = new Array('italic',false,null,'Kursiv');
    intArrIdx++; arrCommands[intArrIdx] = new Array('underline',false,null,'Unterstrichen');

    // Browser ermitteln
    this.getBrowser();

    // Haupt-Container erstellen
    document.write('<div id="'+strName+'" ');
    document.write('style="border:1px solid #E0E0E0; background:#F7F7F7; padding:10px;">');
    document.write('<div id="'+strName+'_buttons"></div>');
    document.write('</div>');
    this.objMainDiv = document.getElementById(strName);
    this.objButtonDiv = document.getElementById(strName+'_buttons');

    // Editor definieren
    this.objEditor = document.createElement('iframe');
    this.objEditor.setAttribute('id',strName+'_iframe');
    this.objEditor.setAttribute('width',intWidth);
    this.objEditor.setAttribute('height',intHeight);
    this.objEditor.setAttribute('frameborder',0);
    this.objEditor.setAttribute('style','margin-top:5px; border:1px solid #E0E0E0; background:#fff;');

    // Editor veröffentlichen
    this.objMainDiv.appendChild(this.objEditor);

    // Buttons definieren
    for (var i=0; i<arrCommands.length; i++)
    {
        this.objImage = document.createElement('img');
        this.objImage.setAttribute('id','btn_'+arrCommands[i][0]);
        this.objImage.setAttribute('src','icons/'+arrCommands[i][0]+'.gif');
        this.objImage.setAttribute('style','border:1px solid #F7F7F7;');
        this.objImage.setAttribute('alt',arrCommands[i][3]);
        this.objButtonDiv.appendChild(this.objImage);

        document.getElementById('btn_'+arrCommands[i][0]).onclick = function() {
            this.doExecCommand(strName+'_iframe',arrCommands[i][0],arrCommands[i][1],arrCommands[i][2]);
        }
    }

    // In Design-Mode umschalten
    setTimeout(function() { objSelf.setDesignMode(strName+'_iframe',strValue); } , 100);
    document.getElementById(strName+'_iframe').contentWindow.document.close();
    document.getElementById(strName+'_iframe').contentWindow.focus();

    // Vordefinierten Text setzen
    document.getElementById(strName+'_iframe').contentWindow.document.open();
    document.getElementById(strName+'_iframe').contentWindow.document.write(strValue);
    document.getElementById(strName+'_iframe').contentWindow.document.close();
    
    // CSS ausschalten
    this.doNotCSS(strName+'_iframe');
}

/*
* iFrame in Design-Mode setzen
*/
fbEditor.prototype.setDesignMode = function(elementId,strValue)
{
    document.getElementById(elementId).contentWindow.document.designMode = 'On';
}

/*
* Browser ermitteln
*/
fbEditor.prototype.getBrowser = function()
{
    if (navigator.appName.indexOf('Netscape') != -1)
        useBrowser = 'Netscape';
    else if (navigator.appName.indexOf('Microsoft') != -1)
        useBrowser = 'IE';
    else if (navigator.appName.indexOf('Opera') != -1)
        useBrowser = 'Opera';
}

/*
* Style-Tags ausschalten
*/
fbEditor.prototype.doNotCSS = function(elementId)
{
    doc = document.getElementById(elementId).contentWindow.document;
    if (useBrowser != 'IE') doc.execCommand('useCSS', false, true);
}

/*
* Kommandos ausführen
*/
fbEditor.prototype.doExecCommand = function(elementId,command,param1,param2)
{
    this.doNotCSS(elementId);
    objEditor = document.getElementById(elementId).contentWindow.document;
    objEditor.execCommand(command,param1,param2);
} 

[Wyveres]

es ist Ziemlich Sinn endleerend innerhalb einer Forschleife ein onclick event zu zu weisen -.-

wirft dir in jedem fall ein Undefind zurück ^^

function blah()
{
var ArrInt = new Array();
ArrInt[0] = "Hallo 1";
ArrInt[1] = "Hallo 2";
ArrInt[2] = "Hallo 3";
ArrInt[3] = "Hallo 4";  
var i=0;   
        document.getElementById('selfTest').onclick= function()    
        { 
        for(;i<ArrInt.length;i++)
            {
            alert(ArrInt[i]);
            }
        }
}
hallo = new blah(); 

geht jedoch Ohne probleme ...

[TriphunEM]

document.getElementById('btn_'+arrCommands[i][0]).onclick 

ist dir das im code aufgefallen? hab keine feste ID in dem Moment.

ich will ja ein onclick-event jedem button zu weisen, der grad erstell wird. also brauch ich die schleife auch schon vorher!

[Wyveres]

is mir aufgefallen

und ich hab gerade keine zeit aber vieleicht hilft dir ja das hier beim finden einer lösung

http://www.mediaevent.de/javascript/event_listener.html

[Kropff]

schau dir mal hier den punkt 4 an.

gruß
peter

[TriphunEM]

Daher muss man (leider) für jeden einzelnen Hauptmenüpunkt den entsprechenden Event-Handler per Hand erzeugen.

??? und wie soll das dann aussehen? kanns mir grad ne vorstellen?

[Kropff]

siehe den link von Wyveres. so wie du es vorhast, geht es nicht.

peter