yt4440 2023-01-14 11:20 采纳率: 66.7%
浏览 27
已结题

简易计算器的功能无法实现

我刚开始学习js,任务是完成一个简易计算器
感觉已经可以实现功能了,但就是无法显示计算结果

请各位指出我的问题!
谢谢!

img

我尝试了很多方法试图使单选按钮的结果被接收,

```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>
  • 写回答

2条回答 默认 最新

  • SSS4362 2023-01-14 11:41
    关注

    原生js里面,不是可以通过input
    标签对象.value获取表单input标签的值吗?
    也可以用jquery中的.val()获取input标签中点值

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月22日
  • 已采纳回答 1月14日
  • 创建了问题 1月14日

悬赏问题

  • ¥15 unity第一人称射击小游戏,有demo,在原脚本的基础上进行修改以达到要求
  • ¥15 蓝桥oj3931,请问我错在哪里
  • ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
  • ¥15 关于#Java#的问题,如何解决?
  • ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
  • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
  • ¥15 cmd cl 0x000007b
  • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
  • ¥500 火焰左右视图、视差(基于双目相机)
  • ¥100 set_link_state