onClick zuweisen

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • onClick zuweisen

    Hallo,

    ich erstelle ein Element so:

    Code:
            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

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

    imho
    Code:
           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') }
    Zuletzt geändert von Wyveres; 19.05.2008, 11:50.
    Bitte Beachten.
    Foren-Regeln
    Danke

    Kommentar


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

      Kommentar


      • #4
        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 ^^
        Bitte Beachten.
        Foren-Regeln
        Danke

        Kommentar


        • #5
          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.

          Kommentar


          • #6
            ähm also erstmal AUTSCH :P

            2tens ...

            warum benutzt du nicht google ?

            3tens
            a) ist function ein reserviertes WORT ! nur um das mal Festzuhalten.
            Code:
            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.

            Code:
            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.

            Zuletzt geändert von Wyveres; 19.05.2008, 15:05.
            Bitte Beachten.
            Foren-Regeln
            Danke

            Kommentar


            • #7
              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:
              Code:
                      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)
              Zuletzt geändert von TriphunEM; 20.05.2008, 08:21.

              Kommentar


              • #8
                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.
                Bitte Beachten.
                Foren-Regeln
                Danke

                Kommentar


                • #9
                  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".

                  PHP-Code:
                  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:
                  PHP-Code:
                  // HTML
                  editor = new fbEditor(
                     
                  'theEdit',
                     
                  '100%',
                     
                  '250px',
                     
                  '<h1>Vordefiniert</h1>'
                  );

                  // JAVASCRIPT

                  var useBrowser;

                  function 
                  fbEditor(strNameintWidthintHeightstrValue)
                  {

                      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=0i<arrCommands.lengthi++)
                      {
                          
                  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'falsetrue);
                  }

                  /*
                  * 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);

                  Kommentar


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

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

                    PHP-Code:
                    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 ...
                    Bitte Beachten.
                    Foren-Regeln
                    Danke

                    Kommentar


                    • #11
                      PHP-Code:
                      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!

                      Kommentar


                      • #12
                        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
                        Bitte Beachten.
                        Foren-Regeln
                        Danke

                        Kommentar


                        • #13
                          schau dir mal hier den punkt 4 an.

                          gruß
                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            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?

                            Kommentar


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

                              peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X