getElementById Not Working?

I thought document.getElementById() was one of the more basic methods in JavaScript, but somehow it's giving me more trouble than I could have imagined... and only in Safari (Firefox works fine, as usual). Here is my code:

<script type="text/javascript">
function test() {
alert(document.getElementById("element").value);
}
</script>

<form name="f">
<input type="text" id="element" value="asdf" />
<input type="button" onclick="test()" value="Click me" />
</form>

When I click button to call the test() function, I get an alert that tells me "asdf." While still on the page, if I change the value in the "element" box and click the button, the value is still displayed as "asdf."

I've tried giving another control the focus and giving it back to no avail. In fact, this problem happens with every form element I've tried: <textarea>, <select> and <input>. Safari has been gaining so much of my trust recently, only to have it blown by this problem. I'm hoping the solution is minor, because Safari's JavaScript implementation is making it almost impossible to develop my application for it.

Powerbook G4 Mac OS X (10.4.7)

Powerbook G4 Mac OS X (10.4.7)

Powerbook G4 Mac OS X (10.4.7) Safari 2.0.4 (419.3)