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

标签 javascript html css

我正在尝试编写一个 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>

最佳答案

您没有引用您的输入元素!

在这个例子中

var first=parsefloat(txtNumber1.value);

txtNumber1 未定义

这会起作用

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

关于javascript - 如何在 HTML 和 Javascript 中实现基本计算器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47365281/

相关文章:

javascript - 无延迟 float div

javascript - 在javascript类中获取文档计数列表

jquery - 如何保持悬停效果像评级栏CSS代码一样?

php - 从 Swiffy 动画代码中读取 PHP var

javascript - 在 vanilla javascript 中实现 siblings()

javascript - 未选中复选框时如何从div中删除元素?

javascript - 在 jQuery 中创建一个新的(永久的)CSS 样式

html - Chrome 渲染层 - 创建条件?

javascript - Css 动画以在悬停时扩展按钮文本

javascript - JS风格的字典初始化快捷方式?