Blake O'Hare .com

JavaScript Tutorial, Part 5 - Interacting with HTML

What good is JavaScript if you can't interact with the HTML page?

Modify your index.html to look like this:
<html>
    <head>
        <title>JavaScript tutorial</title>
        <script type="text/javascript" src="code.js"></script>
    </head>
    <body>
        <input type="text" id="typey_box" />
        <button onclick="do_things()">Click</button>
        <div id="output">Results will appear here.</div>
    </body>
</html>
onclick is a JavaScript event. I will talk about this more later. Just nod and smile for now.

Modify your code.js file to look like this:
function do_things()
{
    var text_box = document.getElementById('typey_box');
    var results_box = document.getElementById('output');
    var text = text_box.value;
    var message = "string length is " + text.length;
    results_box.innerHTML = message;
}
do_things is a user-defined function. I will talk about this more later. Just nod and smile for now.

Your page will look something like this when you launch it.
js_tutorial_10.png

Type something in the box and click the button:
js_tutorial_11.png

Aside from the event and the function definition, two nifty new things happen here.

Getting an element from the page

Here I use the getElementById which exists on the document object. Any HTML element that has its id="..." attribute set, can be accessed by calling this function. The DOM object is stored into the variable and you can do neat things with it. Most importantly...

Reading/Modifying the contents of a DOM object

As you can see there is a handy-dandy property on the DOM object called innerHTML. Reading this property will return a string of the HTML code INSIDE the element. So for example, if you use document.getElementById('foo') to get an element that looks like this:
<div id="foo">Hello</div>

then calling innerHTML on the foo element will return Hello and not <div id="foo">Hello</div>.
Setting it will change the value of Hello on the visible page.

This finally liberates us from being forced to use the window.alert function to get any output from the code. Moreover, it allows you to actually do useful things on the page itself.

function do_things()
{
    var text_box = document.getElementById('typey_box');
    var results_box = document.getElementById('output');
    var text = text_box.value;
    var message = "string length is " + text.length;
    results_box.innerHTML = message;
    results_box.innerHTML = '<div style="color:#f00;">' + results_box.innerHTML + '</div>';
}
This will take the text in results_box and wrap it in div that makes the font red. If you were to set the value of innerHTML, be aware that it will include the div itself, not just the text. Suppose you wanted to just modify the text inside the red div. Then you can add an additional ID to the div and requery for that div, then modify the innerHTML of that...
function do_things()
{
    var text_box = document.getElementById('typey_box');
    var results_box = document.getElementById('output');
    var text = text_box.value;
    var message = "string length is " + text.length;
    results_box.innerHTML = message;
    results_box.innerHTML = '<div id="inner_div" style="color:#f00;">' + results_box.innerHTML + '</div>';
    var red_div = document.getElementById('inner_div');
    red_div.innerHTML = "New Text that appears as red.";
}


As a side note, you may notice that I mix and match double and single quotation marks to indicate strings. They are completely equivalent. As a general rule of thumb, I use double-quotes for written text and single-quotes for HTML code. This is because you are likely to encounter apostrophes in written text and those conflict with single-quote-delimited strings. In HTML, double-quotes are common, so I use the single quotes to delimit them.