href with onclick doing three things at once?

Hello, my first question everyone, so hopefully I don't sound too amateur!

I have a web page I am building where I am using a javascript to load .htm files into a DIV when the user clicks on a link. Unfortunately, the click needs to change three DIV's at the same time. I have it set to do two of them, but, I am not sure how to get a third. Any suggestions?

Thanks everyone!
<a href="javascript:ajaxpage('technologies/islet.htm', 'bookcontent');" onclick="document.getElementById('paginate-bottom').innerHTML=''" class="story">

Open in new window

Who is Participating?
EverLearningCodeMonkeyConnect With a Mentor Commented:
Hi RelsKhan,

I think you should look into creating a function that handles what you're looking to do here and simply call it from the link rather than trying to force the link to chain 3 separate actions together.

Perhaps something along the lines of the code snippet below.

and then in your link do this:

<a href="javascript://" onclick="load_content()" class="story"></a>

function load_content(){
    loadDivContent('div_name1', 'content/page1.htm');
    loadDivContent('div_name2', 'content/page2.htm');
    loadDivContent('div_name3', 'content/page3.htm');

Open in new window

erikTsomikSystem Architect, CF programmer Commented:
can you post more code
You're not limited to one statement in the onclick attribute. The ideal solution is to write a function to do the work as contactkarthi and EverLearningCodeMonkey mentioned. The following code modifies the code you provided.
<a href="#" onclick="document.getElementById('paginate-bottom').innerHTML='';ajaxpage('technologies/islet.htm', 'bookcontent');return false;" class="story">

Open in new window

RelsKhanAuthor Commented:
I think I have more then enough here to make something work. However, if you are interested in the overall picture, I have a page with three columns. The left is a column of menus, the middle is the main content and the right is a list of doctors. What I am trying to do is click something on the left and it brings up the full explanation in the middle and then populates the appropriate doctors on the right column. I realize if I had any experience with databases it would be much easier. However, this is a static page, in that once everything is posted, we don't need to change it. So, I am using some javascript and html files to accomplish most everything.

The code below is what I am using to add the content to the DIV in the main column. The issue is that I use other javascript to load the default content with multiple pages. The default content is in one DIV and the page numbers and links for the default content is in a second DIV below it. So, I am using the below script to fill the main content DIV with the appropriate information when a link is clicked in the left column. Then I need it to clear the DIV with the page numbers while adding the corresponding html file to the right column.

I hope I wrote that so it could be followed.
 <script type="text/javascript">
                        * Dynamic Ajax Content- © Dynamic Drive DHTML code library (
                        * This notice MUST stay intact for legal use
                        * Visit Dynamic Drive at for full source code
                        var bustcachevar = 1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
                        var loadedobjects = ""
                        var rootdomain = "http://" + window.location.hostname
                        var bustcacheparameter = ""
                        function ajaxpage(url, containerid) {
                            var page_request = false
                            if (window.XMLHttpRequest) // if Mozilla, Safari etc
                                page_request = new XMLHttpRequest()
                            else if (window.ActiveXObject) { // if IE
                                try {
                                    page_request = new ActiveXObject("Msxml2.XMLHTTP")
                                catch (e) {
                                    try {
                                        page_request = new ActiveXObject("Microsoft.XMLHTTP")
                                    catch (e) { }
                                return false
                            page_request.onreadystatechange = function() {
                                loadpage(page_request, containerid)
                            if (bustcachevar) //if bust caching of external page
                                bustcacheparameter = (url.indexOf("?") != -1) ? "&" + new Date().getTime() : "?" + new Date().getTime()
                  'GET', url + bustcacheparameter, true)
                        function loadpage(page_request, containerid) {
                            if (page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1))
                                document.getElementById(containerid).innerHTML = page_request.responseText
                        function loadobjs() {
                            if (!document.getElementById)
                            for (i = 0; i < arguments.length; i++) {
                                var file = arguments[i]
                                var fileref = ""
                                if (loadedobjects.indexOf(file) == -1) { //Check to see if this object has not already been added to page before proceeding
                                    if (file.indexOf(".js") != -1) { //If object is a js file
                                        fileref = document.createElement('script')
                                        fileref.setAttribute("type", "text/javascript");
                                        fileref.setAttribute("src", file);
                                    else if (file.indexOf(".css") != -1) { //If object is a css file
                                        fileref = document.createElement("link")
                                        fileref.setAttribute("rel", "stylesheet");
                                        fileref.setAttribute("type", "text/css");
                                        fileref.setAttribute("href", file);
                                if (fileref != "") {
                                    loadedobjects += file + " " //Remember this object as being already added to page

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.