js json制表符报错_JS自学

> JavaScript作为Web的最主流编程语言之一，自学的时候还是要尽快拿下。

文章适合于同样是初学或即将开始学习JS的小伙伴，你将看到鲜活的真实错误案例，还有学习的注意事项。

JavaScript自学概述：

错误案例：

1、JSON[解析JSON数据填到标签内]

<!--

<!--以下是正确的代码-->
<body><script type="text/javascript">//步骤1、创建JS数组数据var stuarr = {"totalnum":3,"students":[{"uname":"zs", "uage":"12", "city":"shanghai"},{"uname":"ls", "uage":"11", "city":"shanghai"},{"uname":"ww", "uage":"13", "city":"shanghai"}]};//步骤4、遍历数据写到表格中window.onload = function(){var btnElt = document.getElementById("mybtn");btnElt.onclick=function(){  //★错误1_onclick不能加()var html = "";//alert(stuarr["students"].length);var emps = stuarr["students"];for(var i=0; i < emps.length; i++){ //★错误2_只能用;号不能用,号；且i要有起始值！html += "<tr>";html +=    "<td>" + emps[i].uname+"</td>";html +=  "<td>" + emps[i].uage+"</td>";html +=   "<td>" + emps[i].city+"</td>"; //★错误3_引用属性不能既用.又用["city"]html +=  "</tr>";};//alert(html);用来调试用//★错误4_表单写入也不能用value，而用innerHTMLdocument.getElementById("mytbody").innerHTML=html;//span不能用value而应该用innerHTML//★错误5_一定要放到btnElt.onclick的事件内，否则页面未加载完成就会执行，会报错document.getElementById("myspan").innerHTML = stuarr.totalnum;}}       </script><input type="button", value="将JSON数据写进表格中", id="mybtn" /><!--步骤2、创建表格--><h2>员工信息列表</h2> <!--h2表示二级标签--><hr><table border="1px", width="50%"><tr><th>姓名</th><th>年龄</th><th>城市</th></tr><tbody id="mytbody"></tbody></table><!--步骤3、创建span信息框-->总数等于<span id="myspan">0</span>个人<!--★错误6_span默认值应放在标签中间,而不是标签内，不用value属性承载默认值--></body>
</html>

复盘备注：

2、文本框内的字符串经过删掉前后空格后显示在页面上

<!--以下是错误的代码-->
window.onload = function(){var btn = document.getElementById("mybtn");btn.onclick = function(){var username = document.getElementById("mytxt").value//★错误1_JS的代码末尾最好都加封号username = username.trim();alert("-->" + username + "<--");
}

<!--以下是正确的代码-->
window.onload = function(){var btn = document.getElementById("mybtn");btn.onclick = function(){var username = document.getElementById("mytxt").value;//★错误1_JS的代码末尾最好都加封号username = username.trim();alert("-->" + username + "<--");
}

复盘备注：解决这个错误花了很长时间...网上查了对JS代码的封号有很多讨论，其中一部分场景一定要加封号，以后还是尽量都加封号吧。

3、声明两个函数实现文本框内容变迁影响

<!--以下是错误的代码-->
window.onload=function(){document.getElementById("mybtn").onclick = function(){var usernameElt1 = document.getElementById("mytxt1");usernameElt2 = document.getElementById("mytxt2");usernameElt2.value = usernameElt1.value;}document.getElementById("mytxt1").onchange = function(){
//★错误1_如果是单独的函数，不要拿另一个注册函数的全局变量，要单独声明usernameElt2 = document.getElementById("mytxt2");usernameElt2.value=""}
}

<!--以下是正确的代码-->
window.onload=function(){document.getElementById("mybtn").onclick = function(){var usernameElt1 = document.getElementById("mytxt1");var usernameElt2 = document.getElementById("mytxt2");usernameElt2.value = usernameElt1.value;}document.getElementById("mytxt1").onchange = function(){//★错误1_如果是单独的函数，不要拿另一个注册函数的全局变量，要单独声明var usernameElt2 = document.getElementById("mytxt2");usernameElt2.value=""}
}

复盘备注：本质要理解函数注册很可能只在方法区内存占用空间，还没有实际可调用的对象的堆内存。

最后，谢谢大家查看，希望帮忙点赞评论~

js json制表符报错_JS自学_常见错误复盘相关推荐

js json制表符报错_llhttp是如何使Node.js性能翻倍的？
如果你关注 Node.js 社区,那么你一定记得 Node.js v12 一个非常重磅的功能就是,内核的 HTTP Parser 默认使用 llhttp,取代了老旧的 http-parser,性能提升 ...
js json制表符报错_Node.js一个好汉的三个帮
npm npm是当之无愧的大哥,从Node.js出场的那一天开始就一起打天下.主要是帮Node.js管理包.最早它仅仅针对于Node.js项目,后来它的作用越来越大,把bower一些对手都干掉了,现在 ...
python语法报错_Python语法的常见错误和处理异常
在学习Python的过程中,一定会遇到很多困难,我相信很多时候的,报错就会是让人抓狂,一个好的程序员最主要的特质,就是处理错误的能力.在面对每次遇到的问题,要多总结多做笔记,争取下次避免犯同样的错误, ...
第一性原理VASP计算报错解决方法及常见错误汇总
我们在进行第一性原理计算时,如遇到以下报错情况: running on 32 total coresdistrk: each k-point on 32 cores, 1 groupsdistr: o ...
关于：js使用$.parseJSON字符串转json对象报错Uncaught SyntaxError- Unexpected token o in JSON at position 1
今天使用js使用$.parseJSON字符串转json对象报错Uncaught SyntaxError- Unexpected token o in JSON at position 1,一直找不到原 ...
ajax文件上传报400,js ajaxfileupload.js上传报错的解决方法
相信大家在工作中经常用到文件上传的操作,因为我是搞前端的,所以这里主要是介绍ajax在前端中的操作.代码我省略的比较多,直接拿js那里的 $.ajaxFileUpload({ url:'www.cod ...
spring boot ajax 415,解决@RequestBody接收json对象报错415的问题
@RequestBody接收json对象报错415 前端请求: $.ajax({ url: basePath() + "/index/login.do", type : " ...
python response.json()报错_Django JsonResponse json格式报错解决Django响应JsonResponse返回json格式数据报错问题...
想了解解决Django响应JsonResponse返回json格式数据报错问题的相关内容吗,彭世瑜在本文为您仔细讲解Django JsonResponse json格式报错的相关知识和一些Code实例 ...
Java解析JSON时,new JSONObject(这儿写json字符串)报错问题
在获取json字符串后Java使用api创建json对象报错,查阅资料解决该问题: 问题原因:net.sf.json.jsonobject 没有 new JSONObject(String)的构造方法 ...

js json制表符报错_JS自学_常见错误复盘

JavaScript自学概述：

错误案例：

1、JSON[解析JSON数据填到标签内]

js json制表符报错_JS自学_常见错误复盘相关推荐

最新文章

热门文章