刚学 JavaScript 的朋友，是不是经常遇到这种情况？明明跟着教程敲代码，结果一运行控制台就红一片，报错信息看得头大，不知道哪里出问题？改来改去还是错，越改越着急？别慌，兔子哥今天就把初学者最容易踩的坑汇总起来，一个个讲清楚为啥会错、在啥场景下会遇到，以及怎么解决，看完你会发现，这些错误其实都有规律可循！
一、变量没定义就用，控制台报错 “is not defined” 怎么办？
基础问题：这到底是什么错误？
控制台提示 “xxx is not defined”，意思是你用了一个没定义的变量。比如写了
console.log(name);但没提前声明 name，就会报这错。场景问题：什么时候容易犯这错？
刚学变量的时候，有时候随手写个变量名就用，忘了前面加
let或var；或者变量名拼错了，比如把username写成userame，电脑可不认识拼错的名字。解决方案：先声明再使用，拼写检查不能少
解决办法很简单，用变量前先声明：
javascript
// 错误写法age = 18;console.log(age); // 虽然可能运行，但不规范，容易出错// 正确写法let age; // 先声明age = 18; // 再赋值console.log(age); // 输出18// 或者声明时直接赋值let name = "小明";console.log(name); // 输出小明另外写完变量名多检查一遍拼写，特别是长变量名，差一个字母就会报错。
二、类型转换搞不清，“10”+2 结果是 “102” 不是 12？
基础问题：为啥数字加字符串会变成拼接？
JavaScript 里不同类型的数据运算时会自动转换类型，这叫 “隐式类型转换”。比如数字和字符串相加，会把数字转成字符串，然后拼接起来，而不是数学加法。
场景问题：做计算器、表单输入时最容易遇到
比如用户在输入框里填的数字，拿到的其实是字符串类型。你想算
"10" + 5，结果得到"105"，不是 15，这时候就懵了。解决方案：手动转换类型，该转数字就转数字
用
Number()把字符串转成数字，或者用parseInt()（整数）、parseFloat()（小数）：javascript
// 错误示例let num1 = "10";let num2 = 2;console.log(num1 + num2); // 输出"102"，不是12// 正确示例let num1 = "10";let num2 = 2;// 转成数字后再运算console.log(Number(num1) + num2); // 输出12// 或者用parseIntconsole.log(parseInt(num1) + num2); // 输出12表单输入的内容先用
Number()转一下，再做运算就不会错啦。三、DOM 操作时提示 “null”，找不到元素怎么回事？
基础问题：为啥 getElementById 返回 null？
你想通过
document.getElementById("box")找元素，结果控制台显示null，说明没找到这个元素。场景问题：代码写在里，或者元素 id 写错了
最常见的原因是 JavaScript 代码写在
解决方案：让代码等元素加载完，检查 id 是否一致
把代码放在
window.onload等页面加载完再执行：html
<head><script>let box = document.getElementById("box");console.log(box); // 输出nullscript>head><body><div id="box">div>body><body><div id="box">div><script>let box = document.getElementById("box");console.log(box); // 输出div元素script>body><head><script>window.onload = function() {// 页面加载完才执行let box = document.getElementById("box");console.log(box); // 输出div元素}script>head><body><div id="box">div>body>另外一定检查元素 id 和代码里的是否完全一样，多一个空格都不行。
四、事件绑定没效果，点击按钮没反应？
基础问题：为啥按钮点击了没反应？
可能是事件绑定错了元素，或者绑定的时候元素还没加载，又或者函数名拼错了。
场景问题：动态添加的元素绑定事件，或者用 onclick 时函数名错了
比如你动态创建了一个按钮，直接用
btn.onclick = myFunc，但这时候按钮还没加到页面上；或者函数名是changeText，你写成了changText，自然调用不到。解决方案：确保元素存在后再绑定，检查函数名拼写
动态元素可以用事件委托，或者添加到页面后再绑定：
javascript
// 错误示例：函数名拼写错function changeText() {console.log("点击了");}let btn = document.getElementById("btn");btn.onclick = changText; // 函数名少了个e，没反应// 正确示例1：检查函数名btn.onclick = changeText; // 拼写正确，点击有反应// 正确示例2：动态元素绑定// 先把元素加到页面let newBtn = document.createElement("button");newBtn.textContent = "新按钮";document.body.appendChild(newBtn);// 再加事件newBtn.onclick = function() {console.log("动态按钮被点击");};绑定事件前，先确认元素已经在页面上了，函数名也要仔细核对。
五、分号、引号不规范，代码运行出怪事？
基础问题：少个分号、引号不配对会怎样？
JavaScript 虽然有时候能自动补分号，但少分号可能导致代码解析错误；引号不配对，比如左引号用了双引号，右引号忘了写，会直接报错。
场景问题：写代码太快，随手漏了符号
比如写
let msg = "你好 没写右引号，或者for(let i=0; i<10; i++)后面漏了分号，都可能出问题。解决方案：养成写符号的习惯，写完检查符号配对
javascript
// 错误示例：引号不配对let msg = "欢迎学习JavaScript; // 没写右引号，报错// 错误示例：漏分号导致解析错误let a = 10let b = 20 // 可能没问题，但有时候会出错// 正确示例let msg = "欢迎学习JavaScript"; // 引号配对let a = 10;let b = 20; // 加分号更规范写代码时，左引号写完立刻补右引号，分号在语句结束就加上，养成习惯能少很多错。
兔子哥的小建议
学 JavaScript 遇到错误真的很正常，谁刚开始学都这样。遇到报错别着急改代码，先看控制台的错误信息，里面会告诉你哪一行错了，大概是什么问题。比如看到 “is not defined” 就想是不是变量没声明，看到 “null” 就检查 DOM 元素是否存在。
平时写代码慢一点，每写几行就运行一次，别等堆了一堆代码再调试，那时候错误太多不好找。多动手敲代码，遇到错误多试几次不同的解决方法，慢慢就知道怎么快速定位问题了。其实这些错误就像路上的小石子，踩过几次记住了，以后就能顺利避开啦，坚持下去你会越来越顺的！
标签： 解决方案 console.log
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
还木有评论哦，快来抢沙发吧~