Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DOM: Associating a value with an event handler?

    I am wondering how I can associate a value with an event handler. I have info pulled from a database, and each row in the database is displayed as a seperate row in the browser (in text boxes so that users can edit/update the info.)

    The info is passed as XML from the server to the browser, which is then parsed and displayed as described above. Each line of info should have a button at the end (UPDATE) such that when it is clicked it kicks in a function (doEditInfo) that will update the current line of information in the database.

    I know I can create the button for each line like this:

    Code:
    var mybutton = document.createElement("button");
    var theText = document.createTextNode("update");
    mybutton.appendChild(theText); 
    mybutton.onclick = doEditInfo;
    That button is then appended to the current line as the XML is looped through.

    BUT, how does the function doEditInfo know which line to refer to?

    In other words, if I was writing this directly into the html instead of DOM scripted, I would write the button part like this:

    LINE 1: <button onClick="doEditInfo(1)">UPDATE</button>
    LINE 2: <button onClick="doEditInfo(2)">UPDATE</button>
    etc..

    You can see that a number that references the current line is passed as an argument in the event handler. How do I do that using DOM scripting?

    thanks for your help please.

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I often do it like this:
    Code:
    mybutton.onclick = function(){ doEditInfo(1); }
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would that work? Would I then define the function doEditInfo elsewhere in the code?

    I tried your method and it didn't work for me. Could you expand a little? Thanks.

  • #4
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by greenhive
    Would I then define the function doEditInfo elsewhere in the code?
    Yes, of course.

    Quote Originally Posted by greenhive
    I tried your method and it didn't work for me. Could you expand a little?
    Show us what you tried.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I broke the problem I am having down into the simples form in the following code. It loops the variable i from 0 to 5, and on each loop it creates and appends a <p> tag, and then creates and appends a button, onto which it attaches and event handler:

    Code:
    <html>
    <head>
    <title>FIRM LOCATIONS DOM TEST</title>
    
    <script type="text/javascript" language="JavaScript">
    
    doEditInfo = function(num) {
    
    	document.getElementById('show-info').innerHTML = num;
    }
    
    window.onload = function () {
    
    	for (var i = 0; i < 5; i++) {
    
    		var paraElement = document.createElement("p");
    		document.getElementById('firm-locations').appendChild(paraElement);
    
    		/* Create BUTTON */
    		var mybutton = document.createElement("button");
    		var theText = document.createTextNode("update");
    		mybutton.appendChild(theText);
    		mybutton.onclick = function(){ doEditInfo(i); }
    
    		document.getElementById('firm-locations').appendChild(mybutton);
    
    	}
    
    	return true;
    }
    
    </script>
    
    </head>
    <body>
    
    <div id="firm-locations"></div>
    
    <br />
    <div id="show-info">This text should be replaced with number</div>
    
    </body>
    </html>
    As you can see from the code, when one of the buttons is clicked the text in the lower div should be replaced with a number from 0 to 5.

    But if you run the code, what happens is that no matter which button you click, the text is replaced with the number 5, i.e. from the last pass of the loop.

    Obviously that is not what I want. I want each different button to return the correct number associated with 'i' in the loop (when the event handler was assigned.)

    Any ideas what I need to change to make it work? Thanks.

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    What you have there is basically what you want, except for a very common gotcha with scope. To fix:

    Code:
    mybutton.onclick = (function(n) {
        return function() { doEditInfo(n) };
    })(i);

  • #7
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jkd is correct. That technique is called a "closure". Here's an explanation of how that works.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #8
    New Coder
    Join Date
    Jan 2005
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thanks a lot for your help. Even after reading some about them since yesterday closures are a bit of a mind bender for me at the moment. Interesting concept though.

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    there is another way, but also using a closure. You may create and attach a variable to the element:

    mybutton.ind=i;
    mybutton.onclick = function(){ doEditInfo(this.ind); }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •