注意了！JS中name和top坑

学习前端的同学以及后端同学，都会接触到JavaScript这门语言，今天就跟大家聊一聊在写JS代码中，经常遇到的一些坑。最经典也最常见的就是name和top这两个坑！很多做开发的同学，都遇到过这个问题。

首先看一段代码：
名字:

顶部:
取值
< script>
    /***
     * 获取输入的值
     * */
    //获取uname输入框
    var name = document.getElementById('uname');
    //获取mytop输入框
    var top = document.getElementById('mytop');
    //btn绑定click事件
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        //打印输入框的值
        console.log(name.value);
        console.log(top.value);
    }
< /script>

页面显示效果:


 
这是一个普通不能再普通的表单，里面有两个输入框和一个按钮，通过点击取值按钮，获取输入框中的值。下面我们输入值进行获取：


 
尴尬的事情发生了，在控制台打印的结果都是undefined。这是什么原因呢？那我们把代码修改一下，把变量名name和top换成name1和top1看看：

<script>
    /***
     * 获取输入的值
     * */
    //获取uname输入框
    var name1 = document.getElementById('uname');
    //获取mytop输入框
    var top1 = document.getElementById('mytop');
    //btn绑定click事件
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        //打印输入框的值
        console.log(name1.value);
        console.log(top1.value);
    }
< /script>

取值结果：
 

它！！！居然又可以了，着实让我们吃了一鲸。
那么为什么我们使用name和top就不行呢，这里要给大家说明一点，在JS的顶层有一个全局对象window，凡是window上的属性和方法就是全局的属性和方法，name和top属性已经被window对象使用：


 
看到这里同学们应该已经明白了为什么不能用name和top作为变量名了吧，会跟全局变量window的属性name和top重名。在JS中就不能正常的取到输入框的值了，解决方式也很简单：换个名字！——上海尚学堂WEB前端