前端HTML代码编写中出现错误和改错方法

坊垚

已于 2022-03-25 15:03:18 修改

阅读量3.6k

点赞数 2

分类专栏：前端编程 jquery 文章标签： javascript

于 2022-03-21 09:26:35 首次发布

本文链接：https://blog.csdn.net/lyfwwb/article/details/123626850

版权

前端编程同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

近期开始进行前端代码编写本文将记录部分编写过程中出现问题和解决过程(本文动态更新):

1、Uncaught　TypeError: $(...).live is not a function

原因：jquery后续版本取消.live的相关代码，采用新版jquery（1.7)以后的找不到该函数，意思就是　　找不到live这个函数了。

说明：is not a function是指错误类型，live是指错误的函数名称

采用直接将live改成.on就消除错误：代码如下：

原出错代码：

$(".body_sanji_div_bor >li").live({
    mouseover: function () {
        var id = $(this).attr('id');
        var pid = $(this).attr('pid');
        /*↓↓触摸状态判断↓↓*/
        $(".body_sanji_div[pid='"+pid+"']").next().remove();
        var cahndu1 = titleLength(jinru_id);
        var cahndu2 = titleLength(id);
        if(cahndu1 > cahndu2){
            // 回退
            // console.log("回退");
            $(".body_sanji_div[pid='"+pid+"']").next().remove();
        }
        /* ↑↑触摸状态判断↑↑*/

        jinru_id = id;
        var ju_top = $(this).offset().top;
        ju_top = ju_top-60;
        var shifou_xiaji = 0;
        for (var i=0;i<menuJson.length;i++){
           if(menuJson[i]['pid'] == id){
               shifou_xiaji = 1;
           }
        }
        if(shifou_xiaji == 1){
            var pid = 0 ;
            for (var i=0;i<menuJson.length;i++){
                if(menuJson[i]['id'] == id){
                    pid = menuJson[i]['pid'];
                }
            }
            var bor_html = html_wuxian_bor(id,ju_top,'on');
            $(".body_sanji_div[pid='"+pid+"']").parent('.body_sanji').append(bor_html);
            for(var x in menuJson){
                if(menuJson[x]['pid'] == id){
                    var wuxian_data = html_wuixan_li(menuJson[x]['id'],menuJson[x]['pid'],menuJson[x]['name'],menuJson[x]['url']);
                    $(".body_sanji_div[pid='"+id+"']").children(".body_sanji_div_bor").append(wuxian_data);
                }
            }
        }
    },
    mouseout: function () {

    }
});

错误如下图：

修改后的代码只在第一行修改live->on:

$(".body_sanji_div_bor >li").on({
    mouseover: function () {
        var id = $(this).attr('id');
        var pid = $(this).attr('pid');
        /*↓↓触摸状态判断↓↓*/
        $(".body_sanji_div[pid='"+pid+"']").next().remove();
        var cahndu1 = titleLength(jinru_id);
        var cahndu2 = titleLength(id);
        if(cahndu1 > cahndu2){
            // 回退
            // console.log("回退");
            $(".body_sanji_div[pid='"+pid+"']").next().remove();
        }
        /* ↑↑触摸状态判断↑↑*/

        jinru_id = id;
        var ju_top = $(this).offset().top;
        ju_top = ju_top-60;
        var shifou_xiaji = 0;
        for (var i=0;i<menuJson.length;i++){
           if(menuJson[i]['pid'] == id){
               shifou_xiaji = 1;
           }
        }
        if(shifou_xiaji == 1){
            var pid = 0 ;
            for (var i=0;i<menuJson.length;i++){
                if(menuJson[i]['id'] == id){
                    pid = menuJson[i]['pid'];
                }
            }
            var bor_html = html_wuxian_bor(id,ju_top,'on');
            $(".body_sanji_div[pid='"+pid+"']").parent('.body_sanji').append(bor_html);
            for(var x in menuJson){
                if(menuJson[x]['pid'] == id){
                    var wuxian_data = html_wuixan_li(menuJson[x]['id'],menuJson[x]['pid'],menuJson[x]['name'],menuJson[x]['url']);
                    $(".body_sanji_div[pid='"+id+"']").children(".body_sanji_div_bor").append(wuxian_data);
                }
            }
        }
    },
    mouseout: function () {

    }
});

结果：错误消除如图：

2、Uncaught ReferenceError: verorccc is not defined at style.js:formatted:311:25

原因：代码行中输入了一个未知的参数

说明：Uncaught ReferenceError是指错误类型，verorccc是指错误的名称，is not defined是指错误的说明，style.js:formatted是指错误的脚本文件名，311:25是指我们错误的行，列坐标　

本人采用直接将verorccc改成sanji_i就消除错误：

错误代码如下：

console.warn('warn输出' + verorccc);

出现如图错误：

改错后代码：

var testvel = 123456;
console.warn('warn输出' + testvel);

经过测试输出来的信息就没有错误了如下图所示：

3、Uncaught SyntaxError: Unexpected identifier　　style.js:formatted:392

原因：代码行中一行代码中调用两次的函数没有用；或，符号去隔开

说明：Uncaught SyntaxError是指错误类型，Unexpected identifier是指错误的说明意思是错误定义一般都是没有正确的使用必须的符号隔开２行代码　，style.js:formatted是指错误的脚本文件名，392 是指我们错误的行，这边列出下列几种常见的

3.1、错误代码没有用；隔开如下：

console.clear();
var testvel = 123456;
console.log('warn输出' + testvel)console.log('warn输出' + testvel);

错误如下图：

本人采用两种方法消除错误：

一、如下代码加上分号；同时回车一次这样语法比较好的习惯，也是不会出现莫名错误的

console.clear();
var testvel = 123456;
console.log('warn输出' + testvel);
console.log('warn输出' + testvel);

二、如下代码全部回车处理，没有加分号，这个强烈不推荐的方法，万一用压缩软件压缩后可能就悲剧了浏览器也识别回车键

console.clear();
var testvel = 123456
console.log('warn输出' + testvel)
console.log('warn输出' + testvel)

运行的结果均没有出现错误如下图：

3.2、错误情形代码没有，符号去隔开如下：

var testvar = {
    name: 'testname'
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

错误如图所示：

改正错误代码如下：

var testvar = {
    name: 'testname',
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

4、Uncaught SyntaxError: Unexpected end of input　　　　　style.js:formatted:568

原因：代码行中函数调用没有使用对应的大括号｝同样的文件名和行号

注意：这边行号往往不是准确的知识和你说到了文件结尾都没有找到函数结尾，处理这样错误就需要往前找，系统提示的错误信息只是个大概了。代码如下：

function fn() {

console.clear();
var testvel = 123456;
console.log('warn输出' + testvel);
console.log('warn输出' + testvel);

错误如图：

在388行的代码上开始的函数符号错误的行号提示是568行，得往前找180行的代码。迷惑性较大

修改代码：

function fn() {
    console.clear();
    var testvel = 123456;
    console.log('warn输出' + testvel);
    console.log('warn输出' + testvel);
}
fn();

运行结果如下图就修正完成：

5、Uncaught SyntaxError: Unexpected token '}'　　　style.js:formatted:392

原因：代码行中函数结尾多了一个｝符号与前面函数{不配对，

注意：这边错误提示行号是结尾多余的地方，有时候删除就可以，有时候就得找出你需要开始的对应的方添加{符号错误代码如下：

function fn(testvel) {
    console.clear();
    console.log('warn输出' + testvel);
    console.log('warn输出' + testvel);
}}

fn();

运行结果错误如下图所示：

改错过程如下２种：

一、删除多余的｝符号如下代码：

function fn(testvel) {
    console.clear();
    console.log('warn输出' + testvel);
    console.log('warn输出' + testvel);
}

fn();

运行结果如下图：

二、补上前面缺失的｛符号代码如下：

function fn(testvel) {{
    console.clear();
    console.log('warn输出' + testvel);
    console.log('warn输出' + testvel);
}}


fn();

运行结果如图所示：

6、Uncaught TypeError: Cannot read properties of undefined (reading 'name')　style.js:formatted:321

原因：代码行中使用一个变量中没有的成员，

注意：要想取出变量成员的值需要正确的变量名和成员名

错误代码如下：

var testvar = {
    name: 'testname',
    family: {
        name:'testfamily'
    }
}

var te = testvar.ff.name;

结果错误界面如下图：

修复代码如下：

注意：修复代码中有２个name，部分的浏览器不支持会报错误。产生Uncaught SyntaxError: Identifier 'name' has already been declared的错误，本文中使用的谷歌浏览器能自动辨别相关类型在测试过程中没有报错。　

var testvar = {
    name: 'testname',
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;

运行结果如下图：

7、 Uncaught SyntaxError: Unexpected token ';'　　　　style.js:formatted:389

原因：在代码中定义时候错误使用；符号了也就是语法不对

看看错误代码如下：

var testvar = {
    name: 'testname';
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

运行如下图错误：

除错的过程：将错误的符号；改成，错误排除看如下代码：

var testvar = {
    name: 'testname',
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

运行结果如下图：

８.Uncaught SyntaxError: Invalid or unexpected token style.js:formatted:389

原因：代码中错误的把‘,’符号打成中文字符的‘，’

注意：这个问题不容易排查出来，在有使用中文场景时候常误换进去的排查时候很难看出二者的区别。提示里面也没有，这个符号相当诡异的错误

错误代码如下：

var testvar = {
    name: 'testname'，
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

运行错误如下图所示：

修改后正确代码：

var testvar = {
    name: 'testname',
    family: {
        name:'testfamily'
    }
}

var te = testvar.family.name;
var testend='测试到这边为止'

运行结果如下图：

Uncaught RangeError: Maximum call stack size exceeded 　style.js:formatted:315

原因：代码中函数调用层次过多，导致栈空间不足了，超过了栈空间的限制

注意：这个错误消息出来后展开错误消息是有相关函数调用的相关顺序信息的，排错是后可以逐步　对应进行排查错误。

下面代码简单的演示了栈溢出的代码实际出现这个错误时候远比演示代码要复杂：

function testfen() {
    var testvar = 'test';
    testfen();
}
testfen();
var testend='测试到这边为止'

运行错误如下图：

修该后正确的代码如下：

function testfen() {
    var testvar = 'test';
    //testfen();去掉自己递归调用的功能就可以了
}
testfen();
var testend='测试到这边为止'

得到结果如下图：

码字不易，当你有所获不妨点个赞，或收藏一下！

坊垚

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端HTML代码编写中出现错误和改错方法

近期开始进行前端代码编写本文将记录部分编写过程中出现问题和解决过程(本文动态更新):1、TypeError: $(...).live is not a function原因：jquery后续版本取消.live的相关代码，采用新版jquery（1.7)以后的找不到该函数本人采用直接将live改成.on就消除错误：代码如下：原出错代码：$(".body_sanji_div_bor >li").live({ mouseover: function () { va
复制链接

扫一扫