如何在HTML和Javascript中實現基本計算器
[英]How to implement basic calculator in HTML & Javascript
問題描述
我正在嘗試編寫一個html代碼以將兩個或多個數字相加，相減，相除或相乘，但是遇到了困難...（我嘗試添加一些CSS只是為了使其看起來不錯，但我更擔心代碼先運行）。 我也在使用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>
3 個解決方案
解決方案1
1 2017-11-18 11:07:43
嘗試更正這些行：
var first=parsefloat(document.getElementsByName("txtNumber1")[0].value);
var second=parsefloat(document.getElementsByName("txtNumber2")[0].value);
document.getElementsByName("txtAnswer")[0].value=Ans;
解決方案2
1 2017-11-18 11:08:51
您未引用輸入元素！
在這個例子中
var first=parsefloat(txtNumber1.value);
txtNumber1未定義
這會起作用
var first=parsefloat(document.getElementsByName(txtNumber1)[0].value);
解決方案3
1 2017-11-18 12:02:37
<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>
基本 BMI 計算器 HTML/Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.