问答详情
源自：6-11 编程练习

一个简单易懂的做法

<!DOCTYPE html>
<html>
  <head>
    <title>事件</title>
    <script type="text/javascript">
      function count() {
        //获取第一个输入框的值
        var a = document.getElementById("txt1").value - 0;
        //获取第二个输入框的值
        var b = document.getElementById("txt2").value - 0;
        //获取选择框的值
        var c = document.getElementById("select");
        var fruit = document.getElementById("fruit");
        //获取通过下拉框来选择的值来改变加减乘除的运算法则
        switch (c.value) {
          case "+":
            fruit.value = a + b;
            break;
          case "-":
            fruit.value = a - b;
            break;
          case "*":
            fruit.value = a * b;
            break;
          case "/":
            fruit.value = a / b;
            break;
        }
        //设置结果输入框的值
      }
    </script>
  </head>
  <body>
    <input type="text" id="txt1" />
    <select id="select">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" id="txt2" />
    <input type="button" value=" = " onclick="count()" />
    <!--通过 = 按钮来调用创建的函数，得到结果-->
    <input type="text" id="fruit" />
  </body>
</html>

提问者：初学小萌新 2020-12-19 20:45

个回答

  • 慕函数3294430
    2022-01-21 16:37:32

    <!DOCTYPE html><html> <head>  <title> 事件</title>    <script type="text/javascript">   function count(){    var a = document.getElementById('txt1').value;       //获取第一个输入框的值    var b = document.getElementById('txt2').value;	//获取第二个输入框的值	var f = document.getElementById('select').value; 	//获取选择框的值	//获取通过下拉框来选择的值来改变加减乘除的运算法则    //设置结果输入框的值     document.getElementById('fruit').value = eval(a + f + b);   }  </script>  </head>  <body>   <input type='text' id='txt1' />    <select id='select'>		<option value='+'>+</option>		<option value="-">-</option>		<option value="*">*</option>		<option value="/">/</option>   </select>   <input type='text' id='txt2' />    <input type='button' value=' = ' onclick="count()" /> <!--通过 = 按钮来调用创建的函数，得到结果-->    <input type='text' id='fruit' />    </body></html>


    0
  • 一只小白鼠i
    2021-04-06 11:26:02

    <!DOCTYPE html>

    <html>

    <head>

    <title> 事件 </title>   

    <script type = "text/javascript" >

    function count() {

    var a = document.getElementById("txt1").value;

    var b = document.getElementById("txt2").value;

    var sum = 0;

    //获取第一个输入框的值

    //获取第二个输入框的值

    //获取选择框的值

    var c = document.getElementById("select").value;

    //获取通过下拉框来选择的值来改变加减乘除的运算法则

    switch(c) {

    case "+":

    sum = parseInt(a)+ parseInt(b);

    break;

    case "-":

    sum = parseInt(a) - parseInt(b);

    break;

    case "*":

        sum = parseInt(a) * parseInt(b);

        break;

    case "/":

        sum =parseInt(a) / parseInt(b);

        break;

    }

    document.getElementById("fruit").value=sum;

    }

    </script>

    </head> 

    <body>

    <input type = 'text'id = 'txt1' / >

    <select id = 'select' onchange="count()">

    <option value = '+' > + < /option> 

    <option value = "-" > - < /option>

    <option value = "*" > * < /option> 

    <option value = "/" > /</option >

    </select>

    <input type = 'text'id = 'txt2' / >

    <input type = 'button'value = ' = 'onclick="count()" / > 

    <!--通过 = 按钮来调用创建的函数，得到结果-->

    <input type = 'text'id = 'fruit' / >

    </body> 

    </html>


    0
  • 慕无忌4360779
    2021-04-02 21:59:22

    为什么-0就变成number类型了

    0
  • qq_默默_9
    2021-01-25 10:56:48

    var fruit = document.getElementById("fruit");

    提前赋值，是挺好的，省了一些代码

    var b = document.getElementById("txt2").value - 0;

    隐式转换为数字也很巧妙啊

    0