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">图片1a>li>
        <li><a href="javascript:;" title="图片2">图片2a>li>
        <li><a href="javascript:;" title="图片3">图片3a>li>
        <li><a href="javascript:;" title="图片4">图片4a>li>
        <li><a href="javascript:;" title="图片5">图片5a>li>
        <li><a href="javascript:;" title="图片6">图片6a>li>
        <li><a href="javascript:;" title="图片7">图片7a>li>
        <li><a href="javascript:;" title="图片8">图片8a>li>
    ul>
    <div class="show_img">
        <img src="resource/images/run_img1.jpg" alt="图片1" />
    div>
    
    <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.οnlοad=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事件是这样的

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

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

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

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

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

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

你可能感兴趣的:(web开发笔记)