Script not working how i would like

Hello,
This is my first time writting in JavaScript. I made a proof of concept script that worked fine but now that i made the production script more elaborate it doesnt work. I am trying to use global variables so i dont have to rewrite code and bloat it. For some reason whenever i use varName.value in a function it doesnt work and give me an error. Chrome spits this at me

Uncaught TypeError: Cannot set property 'value' of null
main
(anonymous function)
onclick

here is what i have in my Js up to now, If i cant get it to work now that i only have 3 functions i could imagine how impossible it would be with 30+.

HTML:::


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DC1</title>
<link rel="stylesheet" type="text/css" href="./dc1.css" media="all" />
<!--[if IE]>
<style type="text/css" media="all">.borderitem {border-style: solid;}</style>
<![endif]-->
<script src="bcc.js">
</script>
</head>

<body>

<div id="main">
<div id="tittle">
</div>
<div class="clearFloat"></div>

<img onClick="option='whToMah'" src="images/whtomah.jpg" id="whtomah" alt="" />


<img onClick="option='mahToWh'" src="images/mahtowh.jpg" id="mahtowh" alt="" />

<div id="logo">
</div>
<div id="colwrap1">
<div id="img">
</div>
<input type="text" name="voltage" id="voltage" value="" />
<div id="img2">
</div>
<input type="text" name="capacity" id="capacity" value="" />
<div id="img3">
</div>
<input type="text" name="result" id="result" value="" />
<img onClick="main()" src="images/submit.jpg" id="submit" alt="" />
</div>
</div>

</body>
</html>


// Copyright 2010 Eric Morales. ericmorales115@gmail.com
/*
Changelog:
10-14-2010::
Initial Creation
*/

// Decalre some global variables

var option; // Used to store information from BCC.option
var voltage; // Used to store information from inputForm.voltage
var capacity; // Used to store information from inputForm.capacity
var result; // used to pass data back to gui

// Define inputForm so we can use it
voltage = document.getElementById('voltage'); // Link voltage to the input from the gui
capacity = document.getElementById('capacity'); // Link capacity to the input from the gui
result = document.getElementById('result'); // Link result to the gui

function main()
{
// Decide which function we are going to call up
result.value = 'part1';
if(option == "WhToMah")
{
// Call up the function for WhToMah
WhToMah(); // Initiate method and pass parameters
}
else if(option == "MahToWh")
{
// Call up the function for MahToWh
MahToWh();
}
} // End of BCC

function WhToMah()
{
// Declare some local variables
var tmpHolder; // Make a temporary variable to hold our work

// Run the formula (capacity / voltage) / 1000
tmpHolder = (capacity.value / voltage.value) / 1000;

// Return the value to the gui
result.value = tmpHolder.toFixed(0);

// Unset the tmpHolder variable to ensure future stability
tmpHolder = 0;
} // End of WhToMah

function MahToWh()
{
// Declare some local variables
var tmpHolder; // Make a temporary variable to hold our work

// Run the Formula capacity * voltage
tmpHolder = capacity.value * voltage.value;

// Return the value to the gui
result.value = tmpHolder.toFixed(2);

// Unset the tmpHolder variable to ensure future stability
tmpHolder = 0;
} // End of MahToWh

I appreciate any help and please call out my errors.
This is my first venture into JavaScript but i think i have a handle of what its all about.
Thanks

Script not working how i would like

ericmorales115

Fotiman

ericmorales115

Fotiman

ericmorales115

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week