如何自己写出一个输入目标数的递增加法

菜鸟一枚 近期开始学习JS  在我看来一边学一边写是最有用的啦~

所以先给自己定个小目标,写出一个小程序来~

程序多有不足,希望各位大牛们不吝啬自己的智慧,多加批评!


使用到了For循环,If语句。

能够实现捕捉输入信息并进行计算的功能。

  1. 核心功能是计算,所以应该先写出一个能够计算的function

测试一下,手动给Sum传入参数:

成功了呢 = =

   

       2.接下来是输入,从网页上获取到数值:

那么首先要做的就是在网页上写出来input框框。

哦对了还有按钮button,

这里的话我用了很多方法去获取Input的值,但是都会报错

比如:

 Var a = document.getElementById(name)    //错误

或者

Var a = document.getElementById(name).value  //错误

或者

Var a = document.getElementById(name).val()   //错误

 

最终我发现了一种能够成功获得Input内值的方法:

我加入了Form表单,然后用

//成功啦!!!!

具体原因到现在也不是非常明白为什么会这样,我也尝试过不在本程序中,而是独立的去调用,也是可以获取到Input中的值。

 

获取到我们输入的值之后,就可以把Input收到的值,传给我们一开始写的计算函数Sum中了!!!

 

然后我们现在得到的  就是一个可以输入数值,并计算这个值一直增加到10的和的程序了

4+5+6+7+8+9=39!!!

程序到这里已经结束了,能够实现最基本的功能了。

 

但是!!!!

当我们输入10以外的数字的时候呢?

或者我们输入一个英文字母?

程序会不进入循环,直接Alert一开始为0 的finalSum。

我们知道在Js中函数也是可以嵌套函数的,甚至是参数,返回值.

所以我们可以写一个If 语句,将我们的程序嵌套进去

If(输入>10||isNaN(输入))

//这里的isNaN是用来判断是不是一个数字 (is not a number)

        {alert 错误}

Else{

        执行程序

}

于是乎我们得到了:

 

成功运行~~~~。

 

过程中遇到的问题以及最终代码:

  1. 会经常出现 Num is not defined  也就是经常说我没定义Num  这里的Num是我传入的参数
  2. 在写这种循环的程序时.若果循环程序内出现逻辑错误,那么他会出现Uncaught RangeError. 

这个错误的中文意思就是“最大堆栈超过了最大值”

我们先看一个简单的,也能最清楚明白这个问题出现的函数:

    function a() {

        a();

    }

只要一运行这个函数,就会直接报上面的那个错误。

由这个简单的例子,我们就很清楚看出来原因:这就是因为一个函数一直递归调用自己,无法停止,只有在内存被塞满(内存溢出)的时候,报错才能够停止。

     3.finalSum = Number(finalSum) + Number(num)

获取最后和的这里 Number()是为了将finalSum和num转换为数字进行相加而不是字符串,如果不加,返回值则会变成0123456789 这种

     4.最大的困难还是在取值哪里,Input中的值一直没法在这个程序体中获取,无论是另一个程序或者是直接获取都能获取的到

 

最终代码

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <script language="javascript">
            function print(num){
                var a=myform.name.value;            //获取Input中输入的值
                var finalSum = 0;                     //定义,初始化最终和
                    num=a;                            //将传入的值放入函数的参数num中
                if(num>10||isNaN(num))                //判断输入数值
                {
                    alert("请输入1-10数字")
                }
                else{                                //执行程序
                    for (;num<10;num++) {
        
                     finalSum = Number(finalSum) + Number(num);

                }

                         alert(finalSum);             //显示最终求和
                }
     }
            </script>
    </head>
        <body>
     <form name="myform">
 
   
    <input type="text" name="name" id="nn" placeholder="在此输入1-10数字" />
        
    <input type="button" name="button" value="请输入" οnclick="print()"/>
        
     </form>
        </body>
    </html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值