JavaScript Forum

**LayneMitch** · 10-21-2008, 12:30 PM

I'm trying to create an online calculator. I don't feel that I'm that far off, but I have no choice but to humble myself because I'm still posting my problem..right..

So far the code is not inserting the selected numbers on the keypad - it's only inserting '0' regardless of which digit is pressed.

Here's the code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">

var the_symbol;
var first_entry;
var second_entry;

onload=function(){
attachHandlers();
}

function attachHandlers(){

var the_nums = document.getElementsByName("number");

var the_equal = document.getElementById("equal");
the_equal.onclick=addTotals;

for (var i=0; i < the_nums.length; i++){
the_nums[i].onclick=inputNumbers;
}

}

function inputNumbers(){

 var the_field = document.getElementById("calcfield");
 var the_signs = document.getElementsByName("operator");
 var my_nums = document.getElementsByName("number");

 var the_opt = function(){return checkforOperator();}

 for (var i=0; i < my_nums.length; i++){
   if (!the_opt)
   {
    if(my_nums[i].onclick)
     {
      the_field.value = my_nums[i].value;
      first_entry += my_nums[i].value;
     }
   }
  

   else if(the_opt)
   {
     if(my_nums[i].onclick) 
     {
      the_field.value=""; 
      the_field.value = my_nums[i].value;
      second_entry += my_nums[i].value;
     }
   }
}
}



function checkforOperator(){

var the_operators = document.getElementsByName("operator");

for (var i=0; i < the_operators.length; i++){

  if (the_operators[i].onclick)
   {the_symbol=the_operators[i].value;return true;}
   else
   {return false};
 
 }
}


function addTotals(){

var field_entry=document.getElementById("calcfield");

if(first_entry && second_entry && the_symbol)
{

var the_sum = parseInt(first_entry+the_symbol+second_entry);
field_entry.value="";
field_entry.value=the_sum;
}

}
</script></head>
<body>
<div>
    <form>
        <input type="text" name="calcvalues" size="30" id="calcfield">
    </form>
</div>

<div id="calculator">
    <div id="firstrow">
        <input type="button" name="number" value="1" id="one" size="2">
        <input type="button" name="number" value="2" id="two" size="2">
        <input type="button" name="number" value="3" id="three" size="2">
        <input type="button" name="operator" value="+" id="plussign" size="2">
    </div>
    <div id="secondrow">
        <input type="button" name="number" value="4" id="four" size="2">
        <input type="button" name="number" value="5" id="five" size="2">
        <input type="button" name="number" value="6" id="six" size="2">
        <input type="button" name="operator" value="-" id="minussign" size="2">
    </div>
    <div id="thirdrow">
        <input type="button" name="number" value="7" id="seven" size="2">
        <input type="button" name="number" value="8" id="eight" size="2">
        <input type="button" name="number" value="9" id="nine" size="2">
        <input type="button" name="operator" value="*" id="multisign" size="2">
    </div>
    <div id="fourthrow">
        <input type="button" name="number" value="0" id="zero" size="2">
        <input type="button" name="operator" value="/" id="divsign" size="2">
        <input type="button" value="=" id="equal" size="2">
    </div>
</div>
</body>
</html>

I know that I may have other problems with this code as well, but are there any suggestions?