Good evening guys and girls! (At least it’s evening time where I am in the world.)
I’m pretty good at creating JS scripts that use inline JS however, this is totally wrong, evil and can sometimes bring about an apocalypse! I don’t want any of this
I’ve been learning Unobtrusive DOM Scripting and all that lovely stuff But I still sometimes struggle with creating unobtrusive scripts!
I want a simple (and I know how simple it is because I know a fair bit of beginners JS and this is super simple stuff, especially for you masters of the language!) script that adds two numeric values together which provide a total. So simply put: 1 + 1 = 2.
Here is the working, evil script I currently have (and feel free to give it the evil eye, I do!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Calculator: Addition</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css">
<script type="text/javascript">
function fnTotal(a,b) {
alert(fnAdd(a,b));
}
function fnAdd(c,d) {
return(parseInt(c)+parseInt(d));
}
</script>
</head>
<body>
<div id="wrapper">
<h1>JavaScript Calculator: Addition</h1>
<p>Use the JavaScript calculator below to add two numbers together from the two text boxes.</p>
<input type="text" name="firstNum">
<input type="text" name="secondNum">
<input type=button value="Add" onClick="fnTotal(firstNum.value,secondNum.value)">
</div>
</body>
</html>
That works (at least in IE8 and FF3, so I assume, although I shouldn’t, that it works in most other modern browsers) but it isn’t what I want. It’s totally wrong and bad and -whacks it- :mad:
This is the new and lovely addition.html I have:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript Calculator: Addition</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css">
<script type="text/javascript" src="addition.js"></script>
</head>
<body>
<div id="wrapper">
<h1>JavaScript Calculator: Addition</h1>
<p>Use the JavaScript calculator below to add two numbers together from the two text boxes.</p>
<input type="text" id="firstNum" name="firstNum">
<input type="text" id="secondNum" name="secondNum">
<input type="button" value="Add" id="add">
</div>
</body>
</html>
And this is the weird external addition.js JavaScript file that seems to be giving me some problems!
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function addition() {
if (!document.getElementById) return false;
var c = document.getElementById("firstNum");
var d = document.getElementById("secondNum");
var add = document.getElementById("add");
add.onclick = function() {
// return (parseInt(c) + parseInt(d));
// alert(parseInt(c) + parseInt(d));
// Your Solution Here? Pretty Please! :D
}
}
addLoadEvent(addition);
I’ve checked in Dreamweaver CS3 to see if there are any problems - Nope. I don’t get any errors in IE8 or in FF3 Error Console. When I type in 1 in the first text box and 1 in the second text box and then click on the Add button I just receive NaN. I know NaN = Not a Number but I can’t figure out what to do to fix it.
I’ve commented out the first two statements that begin with return and alert. And below that you can see a place where I’d love to fit your working solution in I’d like an explanation please too! Or if I’m very close to a solution, I obviously need help in seeing where I’ve made an error
Help, pretty please?
Andrew Cooper