如何在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中實現基本的計算器

回答

相關問題