onclick problem

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Xu, Qian
    #1

    onclick problem

    Hi All,

    I wrote some code but it doesn't work.

    ------------------------------------------
    <html>
    <head>
    <script src="my_broken_ script.js"></script>
    </head>
    <body>
    Hello World
    </body>
    </html>
    ------------------------------------------
    // my_broken_scrip t.js
    var MyClass = {
    init : function() {
    var injectCode = '<button onclick="MyClas s.btnClickHandl er"
    id="btn1">Butto n 1</button>';
    var bd = document.body;
    bd.innerHTML = injectCode + bd.innerHTML;
    },
    btnClickHander : function() {
    alert('Done');
    }
    }

    MyClass.init(); // <-- Error
    ------------------------------------------

    Browser says "MyClass" has no property. But if I replace
    onclick="MyClas s.btnClickHandl er" with onclick="alert( 0)", it works. How
    to bind an event to MyClass.btnClic kHander ?

    BTW: If I bind this event using Prototype, it works.




    --
    Xu, Qian (stanleyxu)
    Tags: None
    • Tom de Neef
      #2
      Re: onclick problem

      "Xu, Qian" wrote:
      ------------------------------------------
      <html>
      <head>
      <script src="my_broken_ script.js"></script>
      </head>
      <body>
      Hello World
      </body>
      </html>
      ------------------------------------------
      // my_broken_scrip t.js
      var MyClass = {
      init : function() {
      var injectCode = '<button onclick="MyClas s.btnClickHandl er"
      id="btn1">Butto n 1</button>';
      var bd = document.body;
      bd.innerHTML = injectCode + bd.innerHTML;
      },
      btnClickHander : function() {
      alert('Done');
      }
      }
      >
      MyClass.init(); // <-- Error
      ------------------------------------------
      >
      Browser says "MyClass" has no property. But if I replace
      onclick="MyClas s.btnClickHandl er" with onclick="alert( 0)", it works. How
      to bind an event to MyClass.btnClic kHander ?
      >
      A few changes help:
      <html>
      <head>
      <script src="my_broken_ script.js"></script>
      </head>
      <body>
      Hello World
      </body onload = MyClass.init()>
      ----------^ so that the DOM is complete
      </html>

      // my_broken_scrip t.js
      var MyClass = {
      init : function() {
      var injectCode = '<button onclick="MyClas s.btnClickHandl er()"
      ------------------------------------------------------------------^ brackets
      id="btn1">Butto n 1</button>';
      var bd = document.body;
      bd.innerHTML = injectCode + bd.innerHTML;
      },
      btnClickHandler : function() {
      ----------------^ spelling "l" missing
      alert('Done');
      }
      }

      // MyClass.init();
      ^ now in onload

      Tom



        Comment

        • Xu, Qian
          #3
          Re: onclick problem

          Tom de Neef wrote:
          >
          // MyClass.init();
          ^ now in onload
          >
          Tom
          >
          >
          >
          Thanks, but this does not help. I am more interested in Why?


          --
          Best regards
          Xu, Qian (stanleyxu)
          stanleyxu's area51
          http://stanleyxu2005.blogspot.com/

            Comment

            • Xu, Qian
              #4
              Re: onclick problem

              Tom de Neef wrote:
              >
              // MyClass.init();
              ^ now in onload
              >
              Tom
              >
              >
              >
              Thanks Tom, but this does not help. I am more interested in Why?

              One thing I do not get, when button is clicked successfully,
              MyClass.btnClic kHandler would be called. I called "alert(this.tag Name)",
              it is "BUTTON" not "MyClass". The "this" pointer should not be MyClass?

              --
              Best regards
              Xu, Qian (stanleyxu)
              stanleyxu's area51
              http://stanleyxu2005.blogspot.com/

                Comment

                • Tom de Neef
                  #5
                  Re: onclick problem

                  "Xu, Qian"wrote:
                  >>
                  >// MyClass.init();
                  >^ now in onload
                  >>
                  >Tom
                  >>
                  >>
                  >>
                  >
                  Thanks Tom, but this does not help. I am more interested in Why?
                  >
                  One thing I do not get, when button is clicked successfully,
                  MyClass.btnClic kHandler would be called. I called "alert(this.tag Name)",
                  it is "BUTTON" not "MyClass". The "this" pointer should not be MyClass?
                  >
                  I suggested three changes. I tested the code with these changes. It works
                  fine.
                  Tom


                    Comment

                    • =?ISO-8859-1?Q?=22=C1lvaro_G=2E_Vicario=22?=
                      #6
                      Re: onclick problem

                      Xu, Qian escribió:
                      <html>
                      <head>
                      <script src="my_broken_ script.js"></script>
                      </head>
                      <body>
                      Hello World
                      </body>
                      </html>
                      ------------------------------------------
                      // my_broken_scrip t.js
                      var MyClass = {
                      init : function() {
                      var injectCode = '<button onclick="MyClas s.btnClickHandl er"
                      id="btn1">Butto n 1</button>';
                      var bd = document.body;
                      bd.innerHTML = injectCode + bd.innerHTML;
                      },
                      btnClickHander : function() {
                      alert('Done');
                      }
                      }
                      >
                      MyClass.init(); // <-- Error
                      I get this error:

                      bd has no properties
                      bd.innerHTML = injectCode + bd.innerHTML;

                      You call init() from <headtag, with no timer or event handling. At
                      that point, it's likely that the isn't any <bodyyet.

                      You should launch init() when page has loaded or when DOM is ready:

                      window.onload=f unction(){
                      MyClass.init();
                      };

                      The above lines are only a quick example, it's not the recommended way
                      to do it because you'll overwrite any other onload actions you may have
                      defined. If you get the addEvent() function from:

                      dean.edwards.name
                      http://dean.edwards.name/weblog/2005/10/add-event2/


                      .... you could change this into:

                      addEvent(window , "load", function(){
                      MyClass.init();
                      });

                      You can also Google for "onDomReady " or "domReady".


                      --
                      -- http://alvaro.es - Álvaro G. Vicario - Burgos, Spain
                      -- Mi sitio sobre programación web: http://bits.demogracia.com
                      -- Mi web de humor al baño María: http://www.demogracia.com
                      --

                        Comment

                        • Xu, Qian
                          #7
                          Re: onclick problem

                          Tom de Neef wrote:
                          "Xu, Qian"wrote:
                          >>// MyClass.init();
                          >>^ now in onload
                          >>>
                          >>Tom
                          >>>
                          >>>
                          >>>
                          >Thanks Tom, but this does not help. I am more interested in Why?
                          >>
                          >One thing I do not get, when button is clicked successfully,
                          >MyClass.btnCli ckHandler would be called. I called "alert(this.tag Name)",
                          >it is "BUTTON" not "MyClass". The "this" pointer should not be MyClass?
                          >>
                          >
                          I suggested three changes. I tested the code with these changes. It works
                          fine.
                          Tom
                          >
                          >
                          Thanks, it was my fault.
                          1. It works when I use attachEventList ner (for Firefox)
                          2. I should write

                          this.btnClickHa nder = function() {
                          // accessing methods or properties of another class works now ;)
                          }



                          --
                          Xu, Qian (stanleyxu)
                          stanleyxu's area51
                          http://stanleyxu2005.blogspot.com

                            Comment

                            • Xu, Qian
                              #8
                              Re: onclick problem

                              Álvaro G. Vicario wrote:
                              Xu, Qian escribió:
                              ><html>
                              > <head>
                              > <script src="my_broken_ script.js"></script>
                              > </head>
                              > <body>
                              > Hello World
                              > </body>
                              ></html>
                              >------------------------------------------
                              >// my_broken_scrip t.js
                              >var MyClass = {
                              > init : function() {
                              > var injectCode = '<button onclick="MyClas s.btnClickHandl er"
                              >id="btn1">Butt on 1</button>';
                              > var bd = document.body;
                              > bd.innerHTML = injectCode + bd.innerHTML;
                              > },
                              > btnClickHander : function() {
                              > alert('Done');
                              > }
                              >}
                              >>
                              >MyClass.init() ; // <-- Error
                              >
                              I get this error:
                              >
                              bd has no properties
                              bd.innerHTML = injectCode + bd.innerHTML;
                              >
                              You call init() from <headtag, with no timer or event handling. At
                              that point, it's likely that the isn't any <bodyyet.
                              >
                              You should launch init() when page has loaded or when DOM is ready:
                              >
                              window.onload=f unction(){
                              MyClass.init();
                              };
                              >
                              The above lines are only a quick example, it's not the recommended way
                              to do it because you'll overwrite any other onload actions you may have
                              defined. If you get the addEvent() function from:
                              >
                              dean.edwards.name
                              http://dean.edwards.name/weblog/2005/10/add-event2/

                              >
                              ... you could change this into:
                              >
                              addEvent(window , "load", function(){
                              MyClass.init();
                              });
                              >
                              You can also Google for "onDomReady " or "domReady".
                              >
                              >
                              Thanks for the tip. Yes, I should wait until the DOM tree has been
                              loaded completely. Currently I use attachEventList ner for Firefox and it
                              works.

                              --
                              Xu, Qian (stanleyxu)
                              stanleyxu's area51
                              http://stanleyxu2005.blogspot.com

                                Comment

                                • Tom de Neef
                                  #9
                                  Re: onclick problem

                                  this.btnClickHa nder = function() {

                                  I think you still miss an "l": Handler instead of Hander
                                  Tom


                                    Comment

                                    Previous template Next
                                    Working...