Using Text Around You (innerText)

by Taylor Pennington aka DigitalPimp   | filed under Web, HTML, CSS, and XML

This is more advanced tutorial that will show you how to keep enable you to keep your code light but make it very powerful. I am writing this tutorial because there a fellow Kirupian that was having a problem getting a pop-up window to work with new section and the code he was using was old and not nimble to say the least so I figured I could play around and reprogram it for him.

In Javascript there are 4 really cool properties that you can use to extract or insert whatever you want into the HTML around you.

The 4 properties are:

• innerText
• outerText
• innerHTML
• outerHTML

However, in this tutorial we are only going to cover the first property. But I guarantee that I will cover the other 3 properties in future tutorials.

innerText

In my opinion this is a very very useful property! A good use for it is to have a 'news/update' section on your site. Before we get to that though, let's work up to it. First off, if you examine this property what does it look like it is going to do? Right off the back we can guess that it is going to pull-out the text incased in HTML tags. So using the Javascript Alerts tutorial that I wrote, we are going to use that function to pull out the text incased in a <DIV> tag.
 

  <DIV id="pullDivText" ONCLICK="checkInnerText();">Who is your daddy?</DIV>

  <SCRIPT>function checkInnerText() {
  alert(pullDivText.innerText);
}
</SCRIPT>

Working Example: (click the following text to see it work)

A more agile innerText

Oh k, now that we have that working and everything let's improve on this function. Always remember the more code you have on a page the bigger the file will get. With that all said, right now this function is setup to only work with this one span tag ID and nothing else. So instead of hard coding the element ID into the function, LETS PASS IT!

  <DIV ONCLICK="dynInnerText(this);">You better believe DigitalPimp is!</DIV>

  <SCRIPT>function dynInnerText(obj) {
  alert(obj.innerText);
}
</SCRIPT>

Working Example: (click the following text to see it work)

Now your saying this looks the same Mr. DP but if you look closer you will realize that it isn't. If you notice this time we didn't have to declare an ID for the element because when you use Javascript in HTML every element is already given a instance name but I'm not going to get too far into that, we will save it for the next tutorial. :) Anywho, back to the script as you can see and explained above we didn't need to declare an ID for the element and also you can see that now we can use that one function all over the page to pull out any text incased in HTML. Pretty nifty huh?

Below is a working example of how you could apply this script in a practical matter on your site.

Real life use

Oh k, for the cool stuff! Let's apply this script to an actual website. Let's say that you are developing this really cool web site that is being updated all the time and you don't want it to be THAT much work to just post an update file. Here is how you can apply the above function to this. Here we go...

This is the function that I am using this to grab the innerText of the <TD>, do a pop-up window and add on the date as an anchor tag to the end of the url of the pop-up window.

                    <SCRIPT LANGUAGE="JavaScript">function popUpDates(dateHere) {
  var combineVars = "popUp.html#" + dateHere;
  window.open(combineVars, "newWin", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=200,height=300");
  }
</SCRIPT>

Here is the HTML of the table below. As you can see, I had to utilize style tags to fake a hyperlink so that it is more visible to a user that you can click on the dates.

                    					<TABLE border="1" cellpadding="3" style="BACKGROUND-COLOR:#F9FDFF;font-family:tahoma;font-size:12px;">
  <TR>
  <TD style="border:1px solid #000000;background-color:#C8C8C8;" align="center"><B>Updates</B></TD>
  </TR>
  <TR>
  <TD style="text-decoration:underline;color:#FF0000;cursor:hand;" ONCLICK="popUpDates(this.innerText);">7-03-2003</TD>
  </TR>
  <TR>
  <TD style="text-decoration:underline;color:#FF0000;cursor:hand;" ONCLICK="popUpDates(this.innerText);">7-06-2003</TD>
  </TR>
  <TR>
  <TD style="text-decoration:underline;color:#FF0000;cursor:hand;" ONCLICK="popUpDates(this.innerText);">7-41-2003</TD>
  </TR>
  </TABLE>

Finally, here is some code from the pop-up window just showing you how I make sure that the date in the table cell above is identical to the date in the anchor tag.

                    <A name="7-41-2003">
Here is the 7-41-2003 update.

If you have any questions, feel free to post them in the Scripting forum for help.

Much Respect,

DigitalPimp

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going! 😇