Uncaught ReferenceError: resource is not defined at HTMLAnchorElement.onclick (learn_demo01.html

冷不防 2022-06-09 09:06 104阅读 0赞

今天写js代码时，出现一个问题：  
\*\*Uncaught ReferenceError: resource is not defined  
at HTMLAnchorElement.onclick (learn\_demo01.html:1)\*\*

起因，我想给a标签添加一个点击事件，通过点击事件的函数修改页面的显示的图片(就是修改图片的路径)，但是给a标签添加上了onclick事件，但是点击事件的函数却一直没有触发。而且控制台一直出现上面的错误。  
html

//全局变量
    //获取图片所在的ul元素节点
    var ul_imgLink = document.getElementsByClassName("img_link")[0];
    //获取图片所在的所有li元素节点
    var li_imgLinks = ul_imgLink.getElementsByTagName("li");
    //获取显示图片的div
    var div_img = document.getElementsByClassName("show_img")[0];
    //获取显示图片的div下的img元素节点
    var showImg = div_img.getElementsByTagName("img")[0];
    //定义一个图片的路径数组
    var img_urls = [
        "resource/images/run_img1.jpg",
        "resource/images/run_img2.jpg",
        "resource/images/run_img3.jpg",
        "resource/images/run_img4.jpg",
        "resource/images/run_img5.jpg",
        "resource/images/run_img6.jpg",
        "resource/images/run_img7.jpg",
        "resource/images/run_img8.jpg"
    ];
    
    //onload事件
    window.onload=function(){ 
        //调用下面函数
        imgLinkClickEvent();
    }
    
    //给图片的超链接添加点击事件
    function imgLinkClickEvent(){ 
        for(var i = 0; i < li_imgLinks.length; i++){
            //获取图片所在的li元素节点下的a元素节点
            var a_imgLinks = li_imgLinks[i].getElementsByTagName("a");
            //获取图片所在的li元素节点下的a元素节点的title属性值
            var a_title = a_imgLinks[0].getAttribute("title");
            //获取图片所在的li元素节点下的a元素节点的href属性值
            var a_url = img_urls[i];
            //给图片的超链接添加点击事件
            a_imgLinks[0].setAttribute("onclick","setImgAttribute("+a_url+","+a_title+")");
        }
    }
    
    function setImgAttribute(url,title){ 
        showImg.src = url;
        showImg.alt = title;
    }

结果：我发现html中的页面a标签的onclick事件是这样的

onclick="setImgAttribute(resource/images/run_img4.jpg,图片4)"

大致一看，没错啊，参数正常，后来反复检查，就是没有给参数添加双引号，结果参数发生错误导致的。正确的写法应该是

//给图片的超链接添加点击事件 a_imgLinks[0].setAttribute("onclick","setImgAttribute(\""+a_url+"\",\""+a_title+"\")");

页面上应该显示的是这样的

onclick="setImgAttribute("resource/images/run_img4.jpg","图片4")"

错误一直显示没有发现resource就是因为参数不是String类型。  
发此文章，与君共勉。