我刚开始学习js,任务是完成一个简易计算器
感觉已经可以实现功能了,但就是无法显示计算结果
请各位指出我的问题!
谢谢!
我尝试了很多方法试图使单选按钮的结果被接收,
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单计算器</title>
<style>
h1{
text-align: center;
font-family: 楷体;
}
.button{
margin-left: 30px;
}
.num1{
margin-top: 40px;
margin-left: 10px;
width: 250px;
margin: 0auto;
}
.num2{
margin-top: 20px;
margin-left: 10px;
width: 250px;
margin: 0auto;
}
div{
width: 600px;
height: 400px;
background-color: rgb(181, 232, 255);
position: absolute;
top: 100px;
left: 550px;
border-bottom: 10px solid rgb(71, 253, 253);
/* box-shadow: 10px 5px 5px rgb(255, 228, 251); */
border-radius: 0 0 20px 20px;
}
.result{
margin-top: 40px;
margin-left: 10px;
width: 250px;
margin: 0auto;
}
.button{
width: 60px;
height: 20px;
font-size: 15px;
font-family: 楷体;
border: none;
}
</style>
</head>
<body>
<div>
<h1>简单计算器</h1>
<hr>
<form action="form1" method="get">
<input type="radio" name="button" id="a" class="button" onchange="button()" checked><label for="a">加法</label>
<input type="radio" name="button" id="b" class="button" onchange="button()"><label for="b">减法</label>
<input type="radio" name="button" id="c" class="button" onchange="button()"><label for="c">乘法</label>
<input type="radio" name="button" id="d" class="button" onchange="button()"><label for="d">除法</label>
</form>
<br>
数一:<input type="text" placeholder="请输入第一个数字" class="num1" id="num1">
<br>
数二:<input type="text" placeholder="请输入第二个数字" class="num2" id="num2">
<br>
<button id="jisuan" class="button" name="jisuan" type="button">计算</button>
<br>
结果:<input type="text" class="result" id="result" placeholder="结果是">
<br>
</div>
<script language="javescript">
// let num1=document.getElementById('num1');
// let num2=document.getElementById('num2');
// let button=document.getElementsByClassName('button');
// // let subtract=document.getElementById('b');
// // let mulitply=document.getElementById('c');
// // let divide=document.getElementById('d');
// let result=document.getElementById('result');
// result.onclick=function(){
// // num1.value num2.value button.value
// }fo
// function count(){
// var num1 = Number(document.getElementById("num1").value);
// var num2 = Number(document.getElementById("num2").value);
// var re=document.getElementById("result");
function button(){
var but=document.getElementById("jisuan");
check1=document.getElementById("a").checked;
check2=document.getElementById("b").checked;
check3=document.getElementById("c").checked;
check4=document.getElementById("d").checked;
// var result=document.getElementById("result");
// 笔记:终止当前函数并返回当前函数的值(返回这个数值的意思),函数整体被赋值为函数的返回值
if(check1==true){
return 1;
}
else if(check2==true){
return 2;
}
else if(check3==true){
return 3
}
else if(check4==true){
return 4;
}
// document.getElementById("result").innerText=result;
}
var but=document.getElementById("jisuan");
but.onclick=function (){
var numa = Number(document.getElementById("num1").value);
var numb = Number(document.getElementById("num2").value);
var result=document.getElementById("result");
var result;
if(1==button()){
result.value = parseFloat(num1.value) + parseFloat(num2.value);
}
else if(button()==2){
result.value = parseFloat(num1.value) - parseFloat(num2.value);
}
else if(button()==3){
result.value = parseFloat(num1.value) * parseFloat(num2.value);
}
else if(button()==4){
result.value = parseFloat(num1.value) / parseFloat(num2.value);
}
}
// 另一种获取选项的方法
// var item=null;
// var a=document.getElementsByName("button")
// // 检索radio
// for(var i=0;i<a.length;i++){
// if (a[i].checked){
// item=a[i].value
// }
// }
// var result = 0;
// result = parseFloat(num1.value) + parseFloat(num2.value);
// }
// re.value=item;
// }
</script>
</body>