How to implement basic calculator in HTML & Javascript

Question

I am trying to write an html code to add, subtract, divide or multiply two or more numbers, but I am having difficulties... (I tried adding a bit of CSS just to make it look good, but I am more concerned about the code running first). I am also using Javascript. What am I doing wrong please?

<html>
<head>

<body bgcolor="FFFCC">
<table border="0" cellpadding="0"
cellspacing="1" sytyle ="border-collapse. collapse"
bordercolor="#1111" width ="50%">

<hi><p align="center">CALCULATOR</p></hi><br>
<script language= "javascript">
function ADD()
{
var first=parsefloat(txtNumber1.value);
var second=parsefloat(txtNumber2.value);
var Ans =first+second;
txtAnswer.value=Ans;
}

function MINUS()
{
var first=parsefloat(txtNumber1.value);
var second=parsefloat(txtNumber2.value);
var Ans =first-second;
txtAnswer.value=Ans;

function DIVIDE()
{
var first=parsefloat(txtNumber1.value);
var second=parsefloat(txtNumber2.value);
var Ans =first/second;
txtAnswer.value=Ans;
}

function MULTIPLY()
{
var first=parsefloat(txtNumber1.value);
var second=parsefloat(txtNumber2.value);
var Ans =first*second;
txtAnswer.value=Ans;
}
function MODULO()
{
var first=parsefloat(txtNumber1.value);
var second=parsefloat(txtNumber2.value);
var Ans =first%second;
txtAnswer.value=Ans;
}

</script> 
</head>



<input type ="text" name="txtNumber1"/><br>
<input type ="text" name="txtNumber2"/><br>
<input type ="button" name="butAnswer" 
value="+" onclick="ADD()"/>
<input type ="button" name="butAnswer"
value="-" onclick="MINUS()"/>
<input type ="button" name="butAnswer"
value="/" onclick="DIVIDE()"/>
<input type ="button" name="butAnswer"
value="*" onclick="MULTIPLY()"/>
<input type ="button" name="butAnswer"
value="%" onclick="MODULO()"/><br>
<input type ="text" name="txtAnswer"/>

</table>
</body>
</html>

Mario Nikolaus · Accepted Answer · 2017-11-18 11:08:51Z

1

Your are not referencing your input elements!

In this example

var first=parsefloat(txtNumber1.value);

txtNumber1 is undefined

This will work

var first=parsefloat(document.getElementsByName(txtNumber1)[0].value);

answered Nov 18, 2017 at 11:08

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahele Dadmand · Accepted Answer · 2017-11-18 11:12:49Z

1

try correcting these lines :

var first=parsefloat(document.getElementsByName("txtNumber1")[0].value);
var second=parsefloat(document.getElementsByName("txtNumber2")[0].value);

document.getElementsByName("txtAnswer")[0].value=Ans;

edited Nov 18, 2017 at 11:12

answered Nov 18, 2017 at 11:07

Rahele Dadmand

5731 gold badge4 silver badges17 bronze badges

Comments

Sultan Khan · Accepted Answer · 2017-11-18 12:02:37Z

  <html>
<head>

</head>
<body bgcolor="FFFCC">

  <table width="50%" align="center">
    <tr><td colspan="2"><hi><p>CALCULATOR</p></hi></td></tr>
    <tr><td><input type ="text" id="txtNumber1" placeholder="Enter first number"/><input type ="text" id="txtNumber2" placeholder="Enter second number"/> <input type ="text" id="txtAnswer"/></td>
<tr><td><input type ="button" name="butAnswer" 
value="+" onclick="ADD()"/>
<input type ="button" name="butAnswer"
value="-" onclick="MINUS()"/>
<input type ="button" name="butAnswer"
value="/" onclick="DIVIDE()"/>
<input type ="button" name="butAnswer"
value="*" onclick="MULTIPLY()"/>
<input type ="button" name="butAnswer"
       value="%" onclick="MODULO()"/></td></tr>
    <tr>

</table>

<script language= "javascript">
var answer=document.getElementById("txtAnswer")
function ADD()
{

  var number1=document.getElementById("txtNumber1")
  var number2=document.getElementById("txtNumber2")
    number1=parseFloat(number1.value)
    number2=parseFloat(number2.value)
var Ans =number1+number2;
answer.value=Ans;
}

function MINUS()
{

  var number1=document.getElementById("txtNumber1")
  var number2=document.getElementById("txtNumber2")
    number1=parseFloat(number1.value)
    number2=parseFloat(number2.value)
var Ans =number1-number2;
answer.value=Ans;
}
function DIVIDE()
{

  var number1=document.getElementById("txtNumber1")
  var number2=document.getElementById("txtNumber2")
    number1=parseFloat(number1.value)
    number2=parseFloat(number2.value)
var Ans =number1/number2;
answer.value=Ans;
}

function MULTIPLY()
{

  var number1=document.getElementById("txtNumber1")
  var number2=document.getElementById("txtNumber2")
    number1=parseFloat(number1.value)
    number2=parseFloat(number2.value)
var Ans =number1*number2;
answer.value=Ans;
}
function MODULO()
{

  var number1=document.getElementById("txtNumber1")
  var number2=document.getElementById("txtNumber2")
    number1=parseFloat(number1.value)
    number2=parseFloat(number2.value)
var Ans =number1%number2;
answer.value=Ans;
}   

</script> 
</body>
</html>

Collectives™ on Stack Overflow

How to implement basic calculator in HTML & Javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related