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

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

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

<h3>图片库</h3>
    <ul class="img_link">
        <li><a href="javascript:;" title="图片1">图片1</a></li>
        <li><a href="javascript:;" title="图片2">图片2</a></li>
        <li><a href="javascript:;" title="图片3">图片3</a></li>
        <li><a href="javascript:;" title="图片4">图片4</a></li>
        <li><a href="javascript:;" title="图片5">图片5</a></li>
        <li><a href="javascript:;" title="图片6">图片6</a></li>
        <li><a href="javascript:;" title="图片7">图片7</a></li>
        <li><a href="javascript:;" title="图片8">图片8</a></li>
    </ul>
    <div class="show_img">
        <img src="resource/images/run_img1.jpg" alt="图片1" />
    </div>
    <!--引入js文件-->
    <script type="text/javascript" charset="UTF-8" src="js/demo01.js"></script>

js

//全局变量
//获取图片所在的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类型。
发此文章，与君共勉。