A bit more readable..
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to do a case-insensitive search for "w3schools" in a string.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
var timing = {
s: null,
e: null,
t: null
}; // start, end, textbox
function typoInit() {
typoSetup();
var t = timing.t;
console.log("typoInit");
}
function typoStart() {
timing.s = timing.e = new Date();
timing.t.onkeypress = typoContinue;
console.log("typoStart");
}
function typoContinue(e) {
if (!e) e = event;
timing.e = new Date();
console.log("typoContinue");
}
function typoSetup() {
timing.t = document.getElementById('typoBox');
var t = timing.t;
t.onkeypress = typoStart;
console.log("typoSetup");
}
function typoCalculate() {
var res = document.getElementById('typoResult');
if (!res) return;
var deltams, chars, cpms, snippets;
deltams = timing.e.getTime() - timing.s.getTime();
chars = timing.t.value.length;
cpms = chars / deltams;
snippets = ["", chars, " characters (in ", deltams, " ms): ", cpms, " cpms"];
res.innerHTML = snippets.join("");
typoSetup();
}
</script>
<form name="foo" onsubmit="return false;">
<textarea id="typoBox"></textarea><br />
<input type="button" id="typoCalcBtn" value="Ok" />
<span id="typoResult"></span>
</form>
<script type="text/javascript">
document.getElementById('typoCalcBtn').onclick = typoCalculate;
typoInit();
</script>
</body>
</html>
I would guess you are having trouble because of the order of your code. If you fire the getdocbyid before the html has loaded, it wont work because it wont find the element.
a solution is to use a window.onload event to fire the method after the window has loaded.
With regards to the closing of tags and markup - all browsers are a little bit.. or a lot.. different. IE for instance, is on the whole crappy with syntax and rather pedantic in most ways - if you have missing closing tags, it will fall over, chrome etc are better and 'interpretting' poor code, but that is not always a good thing.
You want to, ideally, have all your functions in a main js file and put any necessary page calls on the main page that needs them - all though there are many fancy ways of calling functions.
Also, have a look at jquery as that will get you where you wanna a bit quicker, given its fairly simple things you are doing.
