目标:JS实现计算器的效果
内容:
- input获取前端输入的结果
- parseFloat将文本转化为数字
- document.getElementById(“xx”).value获取input输入的值
- 最后精髓计算BUG,输出了NaN,或者undefine
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>加减乘除计算(单选框默认选择)</title>
<style>
</style>
</head>
<body>
<form action="" method="post" name="myform" id="myform">
<div class="wrapper" id="_wrapper">
操作数1:<input type="text" name="number1" id="number1" autocomplete="off"/><br><br>
<input type="radio" name="count" id="" value="" checked="checked"/>加法
<input type="radio" name="count" id="" value=""/>减法
<input type="radio" name="count" id="" value=""/>乘法
<input type="radio" name="count" id="" value=""/>除法<br><br>
操作数2:<input type="text" id="number2" autocomplete="off"/><br><br>
<input type="button" value="计算" id="" οnclick="jisuan()"/>
<input type="reset" value="重置" id="" /><br><br>
计算结果:<input name="txtResult" type="text" id="txtResult" autocomplete="off"/>
</div>
</form>
<script>
var str;
var num1 = 0;
var num2 = 0;
//点击事件 //document.form的name值.input的name值.value
function jisuan(){
str = document.getElementsByName('count');
num1 = parseFloat(document.getElementById("number1").value);
num2 = parseFloat(document.myform.number2.value);
//判断文本框是否为空
//注意此处文本框获取值时使用了parseFloat转换,所以当文本框为空时是NaN,并不是""和null,所以需要用到isNaN来判断。
if(isNaN(num1) && isNaN(num2)){
alert("请先填写数据!");
}
else if(isNaN(num1)){
alert("请填写操作数1!");
}
else if(isNaN(num2)){
alert("请填写操作数2!");
}
else{
danxuankuang();
}
}
//判断单选框是否选中
function danxuankuang(){
if(str[0].checked == true){
document.myform.txtResult.value=num1+num2;
}
else if(str[1].checked == true){
document.myform.txtResult.value=num1-num2;
}
else if(str[2].checked == true){
document.myform.txtResult.value=num1*num2;
}
else if(str[3].checked == true){
document.myform.txtResult.value=num1/num2;
}
else{
alert("单选框异常,未选中!");
}
}
</script>
</body>
</html>
产出:
途径:华东师范大学-毛宏燕老师的JavaEE计数与实践中的JS篇
代码:网上搬运
乱语:
自己写的有个bug,在不断的实验中发现了bug出现的问题。
那就是获取input的值需要在点击计算触发事件之后,
如果在触发事件之前或者说js函数外面,
那么当还没有输入的时候就已经获取了空的文本,
以至于输出的内容是错误的或者说是NaN。
截图提示:
小知识点:
js是弱类型语言,因为它的变量类型没有分,int或者flag或者bool或者string,
如果你给它个“0”,他就是数字类型,你给个“字符”它就是字符串,
以至于我们在计算的时候需要使用parseFloat来进行文本的转换,
这个地方也可以考虑将input中的type设置为number,
我感觉理论是是可行的,编辑的时候还没有尝试。算了还是试了一下,不出我所料是可以的,而且number类型的可以设置数字都不用输入。