意外的数字错误

Question

我一直在编写一个函数,允许用户使用JavaScript将图像从本地文件系统上传到网站.我已成功将图像上传到浏览器.

我还编写了一个允许用户删除这些图像的功能.

var count = 0;
function getPhoto(){

    var file = document.getElementById('ad_photo');
    var list = document.getElementById('ad_photo_upload');
    var fReader = new FileReader();
    var photo_list = [];
    var counter;

    fReader.readAsDataURL(file.files[0]);
    fReader.onloadend = function(event){

        counter = count.toString();

        list.innerHTML += "<li id = 'pic " + counter + "'><img src='" + event.target.result + "'></img><a class = 'close' onclick = 'rem_pic(pic " + counter + ")'>X</a></li>"; 
        photo_list[count] = event.target.result;
        count++;

    }



}

function rem_pic(theID){

    var element = document.getElementById(theID);
    element.outerHTML = "";
    delete element;

}

我的问题是每当我调用"rem_pic(theID)"函数时,我会收到一条Chrome浏览器错误消息"Uncaught SyntaxError:Unexpected number".有没有人知道为什么会这样？我怎么可能改进我写的功能,使它们正常工作？

谢谢

Answer 1

这是因为您将一个数字传递给您的函数:

'rem_pic(pic " + counter + ")'

将呈现给

'rem_pic(pic 1)'
             ^ or any other number according to your counter value

这是错误的,因为javascript params不能包含空格.

所以你可能需要传递一个字符串:

rem_pic(\"pic " + counter + "\")

查看代码似乎就像使用它作为HTML id属性一样.id属性也不能包含空格字符,所以你的代码应该是这样的

rem_pic(\"pic" + counter + "\")

如果您id在布局具有格式id="pic1",id="pic2"等等.