为啥输不出结果?谢谢!

来源:6-11 编程练习

Ceoking

2020-03-22 22:16

<!DOCTYPE html>

<html>

 <head>

  <title> 事件</title>  

  <script type="text/javascript">

   function count(){

       

       var d;

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

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

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

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

    //获取选择框的值

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

    document.write(c);

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

    switch(c)

    {

      case "+":

        d=Number(a)+Number(b);

        break;

      case "-":

        d=Number(a)-Number(b);

        break;

      case "*":

        d=Number(a)*Number(b);

        break;

      case "/":

        d=Number(a)/Number(b);

        break;

    }



    //设置结果输入框的值 

    document.write(d);

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

    




   }

  </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>

代码如上,为什么计算3加3的过程中写入两个document.write()结果就变成下图这样而不是下面第二个图的样式呢?

http://img.mukewang.com/5e7773310001059802220220.jpg

http://img1.mukewang.com/5e77733f00016cd705750172.jpg

写回答 关注

2回答

  • qq_慕少3582976
    2020-03-23 12:54:40
    已采纳

    document.write插入js标签会覆盖页面又两种情况:


    通过onclick() 点击事件触发执行document.write(),会使document.write()覆盖原来的页面。

    在window.onload里面执行document.write(),也会将原来的页面覆盖。


    Ceokin...

    为什么函数onclick()函数方法名不写成onClick呢?

    2020-03-23 20:31:28

    共 1 条回复 >

  • 丶瓜子
    2020-03-23 15:45:44

        d1 = document.getElementById("txt1").value;

        d2 = document.getElementById("txt2").value;

        switch(document.getElementById("select").value){

            case "+":

                document.getElementById("fruit").value = parseInt(d1) + parseInt(d2);

                break;

            case "-":

                document.getElementById("fruit").value = parseInt(d1) - parseInt(d2);

                break;

            case "*":

                document.getElementById("fruit").value = parseInt(d1) * parseInt(d2);

                break;

            default:

                document.getElementById("fruit").value = parseInt(d1) / parseInt(d2);

        }

       }


JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468192 学习 · 21891 问题

查看课程

相似问题