如何在HTML和Javascript中实现基本的计算器

我想写一个html代码来添加，减去，除或乘以两个或更多的数字，但我有困难...（我尝试添加一些CSS只是使它看起来不错，但我更关心代码运行第一）。我也在使用Javascript。请问我做错了什么？如何在HTML和Javascript中实现基本的计算器

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

来源

2017-11-18 Billz

尝试纠正这些行：

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

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

来源

2017-11-18 11:07:43

感谢you..i'll检查 – Billz

你不引用您的输入元素！

在这个例子中

var first=parsefloat(txtNumber1.value);

txtNumber1是不确定的

这将工作

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

来源

2017-11-18 11:08:51

没关系.. 。谢谢你我试试吧 – Billz

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

来源

2017-11-18 12:02:37

我希望你能理解我所做的改变。 –

如何在HTML和Javascript中实现基本的计算器

回答

相关问题