SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    return an object to a div area [solved]

    Hello to all,
    I have three buttons set up using onClick. These buttons are used to display the differing results from an object. They work except the results are displayed on a new page. Ive been trying to get them to display the results in the same page using a div. The problem is I cant get them to work properly i.e the result wont display at all in the div area.
    Here is my code
    Code:
    <body>
    <input type="button" value="emp1" onClick="document.write(ger.getFullName())">
    <input type="submit" value="emp2" onClick="document.write(tom.getFullName())">
    <input type="submit" value="emp3" onClick="document.write(mar.getFullName())">
    <div id="MyID">&nbsp;</div>
    
    </body>
    
    <script language="javascript">
    
    var ger = new employee(7367, "Gerard", "McCloskey");
    var tom = new employee(7368, "Tommy", "Devine");
    var mar = new employee(7368, "Mark", "Leeney");
    
    </script>
    And here is my object function
    Code:
    function employee(_id, _firstname, _lastname)
    		{
    			this.id = _id;
    			this.firstname = _firstname;
    			this.lastname = _lastname;
    			
    			this.getFullName = function()
    			{
    					return this.id + " " + this.firstname + " " +this.lastname;
    			}
    			
    		}
    How do i get the results to display in the div?

    Thanks in advance for any help.
    Last edited by comissioner; May 7, 2009 at 08:53. Reason: request answered

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,494
    Mentioned
    161 Post(s)
    Tagged
    4 Thread(s)
    How about this?
    Code:
    <input type="button" value="emp1" onClick="document.getElementById('MyID').innerHTML = ger.getFullName()">

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guido2004!
    It now works perfectly.
    I had been messing around with getElementById for ages but now I realise I had the syntax all wrong.

    Thanks again!

  4. #4
    SitePoint Addict Smola's Avatar
    Join Date
    Mar 2005
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    More and more I keep hearing that using .innerHTML and document.write are bad ideas. Instead, DOM methods should be used to create new elements. Also, inline javascript is a bad idea. Use a reference to an event handler instead. Your code could be modified like this:

    Code javascript:
    //I'm only including one button for the example but
    //others could easily be added
    <input id="name1" type="button" value="emp1">
     
    <div id="MyID"></div>
     
    <script type="text/javascript">
     
    var ger = new employee(7367, "Gerard", "McCloskey");
    var tom = new employee(7368, "Tommy", "Devine");
    var mar = new employee(7368, "Mark", "Leeney");
     
    function displayName(nameObj) {
       //create a new paragraph element and the textnode that will be the names
       var newElement = document.createElement('P');
       var newTextNode = document.createTextNode(nameObj.getFullName());
     
       //Now append the textnode to the paragraph element and then the
       //paragraph element to your target div
       newElement.appendChild(newTextNode);
       document.getElementById('MyID').appendChild(newElement);
    }
     
    //reference the click handlers here instead of inline
    document.getElementById('name1').onclick = displayName(ger);
    //add other buttons here...
     
    </script>

    Now, it's important to note here that I haven't included the functionality to remove the node that might already exist in your div. So if you put one name in and want it to disappear before you insert the next name, that will require another line or two of code.
    Humbly,

    Smola

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    innerHTML is the non-standard way to add content into the document dynamically that all browsers support. It's actually a lot faster than doing it the W3C way. See Quirksmode for details (i'd post the link but the sitepoint forums think I'm a spammer. Bleh!)


Bookmarks

Posting Permissions

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