Random Snippets » onclick event

How to find and access parent nodes via JavaScript

Knix — Fri, 27 Jun 2008 06:15:53 +0000

Have you ever had to access a parent node from a given child node? In this example, we are going to traverse up the DOM tree starting from the button to look for the parent node with the name attribute itsMe.

Demo

My name is notMe

My name is itsMe

My name is notMeEither

My name is tryAgain

My name is sorryNotMe

My name is nopeSorry

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.


My name is notMe
    
    My name is itsMe
        
        My name is notMeEither
            
            My name is tryAgain
                
                My name is sorryNotMe
                    
                    My name is nopeSorry

Here is the findParentNode JavaScript code:

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.

How to create your own customized calculator via JavaScript

Knix — Sun, 27 Apr 2008 01:01:51 +0000

This is a simple example of implementing a calculator with JavaScript and HTML. This calculator will only have the division, multiplication, addition, and subtraction operators but you can easily tack on more functions if needed.

Demo

Here is the html code including the CSS stuff:



Demo

Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the pushButton JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. The rest of the HTML is just icing on the cake so that it actually looks like a calculator.

Here is the JavaScript code for the 2 functions:

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

The pushButton function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.

The calculate function does exactly what it’s name suggests. It takes our string of numbers and operators and evaluates it in line 10. The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.

That’s it!

How to validate email format via JavaScript

Knix — Wed, 02 Apr 2008 05:30:08 +0000

This JavaScript demo verifies that an email address is in the correct format and that the user has typed in the same address in both fields to prevent mistyping of the address. I have borrowed the regex for verifying the correct email format from a different site.

Demo

Here is the plain HTML of the form. Please note that I have removed the action attribute because this is only a demo and we are only concerned with the client-side verification of the JavaScript function.


Email: 

Please type in your email again:

Nothing exciting here except in line 6 where the onClick event is triggered when the user clicks on the button. This event will launch the verifyEmail() JavaScript function which will check the user input of the email address.

Here is the code for the verifyEmail() function:

function verifyEmail(){
var status = false;     
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
     if (document.myform.email1.value.search(emailRegEx) == -1) {
          alert("Please enter a valid email address.");
     }
     else if (document.myform.email1.value != document.myform.email2.value) {
          alert("Email addresses do not match.  Please retype them to make sure they are the same.");
     }
     else {
          alert("Woohoo!  The email address is in the correct format and they are the same.");
          status = true;
     }
     return status;
}

This function will return a false value if the user does not type in an email address in the correct format or if the user fails to type in the same email address in both fields. If the email addresses passes both these tests, then the function will return a true value.

The regex for validating the correct email format in line 2 has been borrowed and edited slightly by adding the i flag so that the regex is case-insensitive.

The if block in lines 3-6 checks to see if the email address in the first field passes the regex check by invoking the search() method on our email string value. This method accepts regex expressions as arguments to check the string and returns the position of the specified value in the string or a -1 if no match was found. If the search() method returns a -1, then an alert would tell the user that an invalid email address has been entered and returns a false value.

Lines 7-10 checks to see if the user has entered the same string in both email fields. This is done by a simple equality check on the string values. If the strings are different, an alert warns the user that the email addresses are not the same and returns a false value.

If we have passed the two tests, then else block in lines 11-14 gets executed. An alert tells the user that he or she has done a good job and the function returns a true value so that you can continue with the form submission.

Ideally, you would have this function run during the onSubmit attribute for the form tag. This way, the form will get submitted when the checkEmail() function returns a true value. Here is an example of how your form would look like:


Email: 

Please type in your email again:

How to dynamically remove/delete elements via JavaScript

Knix — Thu, 27 Mar 2008 05:57:53 +0000

This post is in response to one of the comments on have received regarding the removal of elements via JavaScript. I have taken the original function posted and edited it a little bit for the demo.

Demo

I am the parent div.

I am a child div within the parent div.

Here is the plain HTML code:

I am the parent div.

I am a child div within the parent div.

The important thing to note here is that the child div is within the parent div. Once the Remove Element button is clicked, the onClick event listener is triggered and launches the removeElement JavaScript function. This functions accepts two arguments:

parent – This is just the div id of the parent div.
child – This is the div id of the child div.

Here is the code for the removeElement JavaScript function:

function removeElement(parentDiv, childDiv){
     if (childDiv == parentDiv) {
          alert("The parent div cannot be removed.");
     }
     else if (document.getElementById(childDiv)) {     
          var child = document.getElementById(childDiv);
          var parent = document.getElementById(parentDiv);
          parent.removeChild(child);
     }
     else {
          alert("Child div has already been removed or does not exist.");
          return false;
     }
}

The if block in lines 2-6 attempts to obtain the child element if it exists. This is just in case the user has already removed the child div and is reattempting to it. In this case, a JavaScript error would normally pop up because the child div does not exist.

If the child element does exist, the first thing that we do is obtain the child element in line 3 using the child div id. Next, we do the same thing with the parent element by using the parent div id Lastly, we invoke the removeChild method from the parent element and pass the child element as the argument. That’s it!

If the child div has already been removed, the else block in lines 7-10 gets executed. In this case, an alert would tell the user that the child div has already been removed and the function would return a false value.

Here is another demo of this JavaScript function where you can type in the name of the child element to be removed and just click on the Remove Element button OR you can just click the button that corresponds to each given child div to remove it.

Demo

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

We are using the same JavaScript function as above. Here is the plain HTML for the demo:

My name is parentDiv. I cannot be removed.

My name is child1.

My name is child2.

My name is child3.

Name of child element to be removed:

For those who are lazy in typing in the actual names, we have these handy-dandy buttons:

Here is a demo that removes child elements from the parent using checkboxes that a user would select. This demo uses the same removeElement JavaScript function.

Demo

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne

Remove childTwo

Remove childThree

My name is parentDivElement. I cannot be removed.

My name is childOne.

My name is childTwo.

My name is childThree.

Remove childOne Remove childTwo Remove childThree

The concept is the same as the previous demos where we attach the removeElement function to an event handler, which in this case is the onClick event handler of the checkbox. Once the checkbox is checked (or even unchecked), it fires off the onClick event handler and executes the removeElement JavaScript function and passes off the name of the parent div and the value of the checkbox.

How to find and replace text dynamically via JavaScript

Knix — Fri, 07 Mar 2008 07:18:20 +0000

This is a neat little script that demonstrates two things:

1) Find – If only the Find box is filled in, then the findMyText() JavaScript function will just perform a find for the div that is given. If there is a match, the text will be highlighted and marked in bold.

2) Find and Replace – If both the Find and Replace boxes are filled in, then the findMyText() JavaScript function will do just that.

Demo

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Find
Replacment

Here is the plain HTML:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Find 
Replacment

Please excuse the use of the table for the text inputs and labels. WordPress does some automatic formatting which is annoying sometimes but it is still a great application =) The only thing of importance here is on line 9 where the onClick event executes the findMyText() function and passes 2 arguments:

Needle – This is the text that we are trying to find in the haystack of text.
Replacement – This is our replacement text for any needle that we find.

Here is our JavaScript function:

var haystackText = "";
function findMyText(needle, replacement) {
     if (haystackText.length == 0) {
          haystackText = document.getElementById("haystack").innerHTML;
     }
     var match = new RegExp(needle, "ig");     
     var replaced = "";
     if (replacement.length > 0) {
          replaced = haystackText.replace(match, replacement);
     }
     else {
          var boldText = "\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "
";
          replaced = haystackText.replace(match, boldText);
     }
     document.getElementById("haystack").innerHTML = replaced;
}

Like many of the scripts that you see here, using the JavaScript DOM objects is the key to doing the find and replace dynamically for our website.

The script asks for two parameters: the needle which we are looking for in our text and the text we want to replace it with. Please note that the replacement text is totally optional. If no replacement text is given, then the behavior of the function changes a bit.

The haystackText variable is outside of the function in line 1 because we want to store the original text and always base our searches on the original text. In lines 3-5 is where we store the original text in our haystack div if it is not already set.

Line 6 creates a regular expression object where we place our needle variable along with two flags:

i – This flag causes the regular expression match to be case-insensitive.
g – This flag causes the regular expression match to be global so it matches every occurrence instead of just the first one.

Lines 8-10 checks to see if the replacement text was set. If so, we will use the replace method on our haystackText string object and feed it our match and replacement texts. The resulting string will be saved in the replaced variable.

If the replacement text was not set, the else block in lines 11-14 will be executed. We first prepare a variable of our needle that has a bit of extra styling such as a yellow background and bold text so it stands out better. Next, we just use the replace method on our haystackText string object and pass the match and replacement texts. The resulting string will be saved in the replaced variable.

Lastly, the replaced variable which contains our results is used to substitute what was originally in our haystack div.