Basic Javascript and Html

Started by Jethro_T, Feb 16 2012 04:00 AM

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

You cannot reply to this topic

2 replies to this topic

#1 Jethro_T Members - Reputation: 123

Like

0Likes

Like

Posted 16 February 2012 - 04:00 AM

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

document.getElementById("width").onchange = checkDimensions;

checkDim.js

function checkDimensions() {
	document.getElementById("width").value = "HELLO";
	return false;
}

index.html

<?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>

Sponsor:

#2 Brother Bob Moderators - Reputation: 4655

Like

0Likes

Like

Posted 16 February 2012 - 04:31 AM

The document, including the Javascript, is parsed and executed top-down. When your file event.js is loaded, it is executed, but at that point there is no element with id "width" yet. You need to execute that line after the element with id "width". You also need to ensure that the function checkDimension actually exists at the point that you are installing the onchange callback. At this point, the error is that checkDimension 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 onload property of window or document, which will be called when the whole document (which includes the presence of the element with the "width" id, and the checkDimension function).

window.onload = function() {
    document.getElementById("width").onchange = checkDimensions;
}

It creates an anonymous function and assigns it to the onload callback. When the document has finished loading, it is called so you can install the callback to the desired element.

Back to top

#3 Chris_F Members - Reputation: 749

Like

1Likes

Like

Posted 16 February 2012 - 06:41 AM

Alternatively

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

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

Back to General Programming

Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.