Sign in to follow this  
Jethro_T

Basic Javascript and Html

Recommended Posts

I'm trying to learn some web programming and just spent hours trying to get the most basic javascript working. I don't understand where I'm going wrong, I've downloaded similar examples to the code I wrote and they work fine but my own javascript does not work at all! I would really appreciate if someone could take the time to try to help me figure out what I'm doing wrong.

event.js
[source]
document.getElementById("width").onchange = checkDimensions;
[/source]

checkDim.js
[source]
function checkDimensions() {
document.getElementById("width").value = "HELLO";
return false;
}
[/source]

index.html
[source]
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns = "[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<title>Canvas Printing Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="event.js">
</script>
</head>
<body>
<form action="">
<input type="text" id="width" size="30"/>
</form>
</body>
<script type="text/javascript" src="checkDim.js">
</script>
</html>
[/source]

Share this post


Link to post
Share on other sites
The document, including the Javascript, is parsed and executed top-down. When your file [i]event.js[/i] is loaded, it is executed, but at that point there is no element with id "[i]width[/i]" yet. You need to execute that line after the element with id "[i]width[/i]". You also need to ensure that the function [i]checkDimension [/i]actually exists at the point that you are installing the onchange callback. At this point, the error is that [i]checkDimension [/i]is an unknown symbol, because it will be loaded later into the document.

The way to do these things is to not execute the initialization code until the document has been entirely loaded. Install a callback function to the [i]onload [/i]property of [i]window [/i]or [i]document[/i], which will be called when the whole document (which includes the presence of the element with the "[i]width[/i]" id, and the [i]checkDimension [/i]function).
[code]
window.onload = function() {
document.getElementById("width").onchange = checkDimensions;
}
[/code]
It creates an anonymous function and assigns it to the [i]onload [/i]callback. When the document has finished loading, it is called so you can install the callback to the desired element.

Share this post


Link to post
Share on other sites
Alternatively

[code]
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("width").onchange = function() {
this.value = "HELLO";
return false;
}
}
[/code]

The advantage of DOMContentLoaded is that it executes as soon as the DOM has loaded, where as window.onload will wait until [i]all[/i] content has finished loading. If your page has images and ads, this means your code could get to execute much sooner.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this