The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

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

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 namesvar 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.

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!)