<a href="javascript: void(0);" onclick="dosomething();">click me</a>

I honestly did not write this one but I will leave names out of this to protect the innocent =)

The void(0) JavaScript code is usually used to prevent loading or reloading of the page when the user clicks the link.

What we were trying to do here was have the dosomething JavaScript function execute when a user clicks on the link. This works fine in FireFox, Chrome, Safari but not IE. When a user clicks on the link in IE, nothing happens: i.e. (no pun intended) the JavaScript does not execute.

It took us a good amount of time to realize what the issue was with IE. It turns out that the void(0) function was preventing the onclick event to fire.

Although it may not be pretty, this is what we ended up doing and it appears to be cross-browser friendly:

<a href="<?=$_SERVER['PHP_SELF'];>#" onclick="dosomething();">click me</a>

Anyway, I hope this helps someone out there in the universe.

Here is the HTML code. It’s just a series of embedded div elements with different names and the input button where we start to traverse up the DOM tree accessing each parent node and asking for it’s name attribute value. The onClick event of the button triggers the findParentNode and passes the name of the element we are looking for and the object itself which, in this case, is the button. This is the starting point where we will begin traversing up the DOM tree by accessing the parent nodes of each element and seeing if the name attribute matches what we are looking for.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div name="notMe" style="padding:10px;border:1px solid green;">
My name is <b>notMe</b>
    <div name="itsMe" style="padding:10px;border:1px solid blue;">
    My name is <b>itsMe</b>
        <div name="notMeEither" style="padding:10px;border:1px solid red;">
        My name is <b>notMeEither</b>
            <div name="tryAgain" style="padding:10px;border:1px solid purple;">
            My name is <b>tryAgain</b>
                <div name="sorryNotMe" style="padding:10px;border:1px solid black;">
                My name is <b>sorryNotMe</b>
                    <div name="nopeSorry" style="padding:10px;border:1px solid brown;">
                    My name is <b>nopeSorry</b>
                        <input type="button" value="Find Parent Object with name=itsMe" onClick="findParentNode('itsMe', this);">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the findParentNode JavaScript code:

1
2
3
4
5
6
7
8
9
10
11

function findParentNode(parentName, childObj) {
    var testObj = childObj.parentNode;
    var count = 1;
    while(testObj.getAttribute('name') != parentName) {
        alert('My name is ' + testObj.getAttribute('name') + '. Let\'s try moving up one level to see what we get.');
        testObj = testObj.parentNode;
        count++;
    }
    // now you have the object you are looking for - do something with it
    alert('Finally found ' + testObj.getAttribute('name') + ' after going up ' + count + ' level(s) through the DOM tree');
}

In line 2, we access the parent node of the child element via the parentNode method which is the first div above the button named nopeSorry. We then begin a count of the number of times we traversed up the DOM tree and set it to 1 because we have already accessed the parent node once. The while loop will test if the name of the current node will match the name that we are looking for. If not, it moves up the DOM tree by accessing the next parent node and continues to look for the right name while increasing the count by 1 each time. Once it finds the right node, the function exits the while loop and alerts the node name along with the number of times it traversed up the DOM tree.

If you do not know the name of the parent element you are looking for you can also search using the tagName method. The tagName will return the value of the tag name of the given node such as A or DIV.

Here is the plain HTML for the demo:

1
2
3
4
5
6
7
8

<form name="myForm">
Content to be added:
<textarea name="myContent">Type here...<h1>tags work as well</h1><u>woohoo</u></textarea>
<input type="button" value="Add content" onClick="addContent('myDiv', document.myForm.myContent.value); setCookie('content', document.myForm.myContent.value, 7);">
</form>
<br><br>
Your content will be added dynamically below:
<div id="myDiv"></div>

There are 3 important parts to the HTML code:

1. textarea – This is the content that the user enters. HTML tags are naturally supported.
2. Add content button – This buttons calls our addContent() function which passes the div id of where the content is to be entered and the actual content itself from the textarea.
3. myDiv – This is the id of blank div where the content will be inserted.

Here is the JavaScript code for the addContent() function:

1
2
3

function addContent(divName, content) {
     document.getElementById(divName).innerHTML = content;
}

That’s it! All it does it retrieve the DOM element, which in this case, is just an empty div and sets the innerHTML attribute to the content that is passed over to this function from the form.

This demo is in response to a request that saves the content that the user has entered.

Here is the HTML code:

1
2
3
4
5
6
7
8
9

<form name="myForm2">
Enter your name below and click the button.  Your name will be saved to a cookie that expires in 7 days.  When you refresh the page or come back to visit you will see a heartwarming message welcoming you back.
<br><br>
<input text name="myContent2" value="Enter your name here...">
<input type="button" value="Save my name" onClick="addContent('myDiv2', document.myForm2.myContent2.value); setCookie('content', document.myForm2.myContent2.value, 7);">
</form>
<br><br>
Your name will be saved below:
<div id="myDiv2" style="font-weight: bold;"></div>

The onClick event listener will launch 2 scripts this time:

1. addContent – This will do exactly what it did before in the first demo and just insert the input text value inside the div.
2. setCookie – This will save a cookie with the name content and assign whatever is inside the input text as the value. In addition, the cookie is set to expire in 7 days.

To avoid reinventing the wheel, I have borrowed the JavaScript get and set cookie functions from W3 Schools and edited it slightly for the needs of this demo.

Here are the new JavaScript functions for cookie management:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) { 
            c_start=c_start + c_name.length+1; 
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            var cookieContent = "Welcome back " + unescape(document.cookie.substring(c_start,c_end));
            document.getElementById('myDiv2').innerHTML = cookieContent;
        } 
    }
}
getCookie('content');

Please refer to W3 Schools for a detailed description of these JavaScript functions. The only edit I have made is with the getCookie function in lines 13-14 where it retrieves the cookie value and inserts the content into a div. Also, line 18 is very important as it calls the getCookie function and looks for the content cookie. If the cookie exists, the content will be displayed in the myDiv2 div.

When using these JavaScripts, make sure you load them after all your HTML is loaded. Otherwise, the function would have no place to insert the cookie content.

Although using cookies is a great way to store information, there are a couple of caveats:

1. Size limitation – This depends on the browser but keeping your cookies to a maximum size of 4000 bytes will keep you in the safe zone.
2. Cookie limit per domain – This also depends on the browser but the general rule is 20 cookies per domain.