控制台显示 Uncaught SyntaxError: Unexpected identifier答案

【问题标题】：console displays Uncaught SyntaxError: Unexpected identifier控制台显示 Uncaught SyntaxError: Unexpected identifier
【发布时间】：2019-06-25 15:36:19
【问题描述】：

我修改了函数moveElement 并将其形参从elementID 更改为element。我想直接将DOM对象从函数positionMessage传递给函数moveElement。 Chrome 一直显示 Uncaught Syntax 错误，我不知道哪里出了问题。如果您能给我一些帮助或指点，我将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</script>
    <script type="text/javascript" src="scripts/positionMessage.js"></script>
    <script type="text/javascript" src="scripts/moveElement.js"></script>
</head>
<body>
    <p id="message">Whee!</p>
</body>
</html>

moveElement.js：

function moveElement(element,finx,finy,interval){
    var xpos = parseInt(element.style.left); 
    var ypos = parseInt(element.style.top);
    if(xpos == finx && ypos == finy) return true;
    if(xpos > finx) xpos--;
    if(xpos < finx) xpos++;
    if(ypos > finy) ypos--;
    if(ypos < finy) ypos++;
    element.style.left = xpos+"px";
    element.style.top = ypos+"px";
    var repeat = "moveElement("+element+","+finx+","+finy+","+interval+")";
    var movement = setTimeout(repeat,interval);
}

positionMessage.js：

window.onload = positionMessage;
function positionMessage(){
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement(elem,200,100,10);
}

控制台显示此错误：

Uncaught SyntaxError: Unexpected identifier

【问题讨论】：

什么是意外标识符？它应该告诉你。此外，你真的不应该使用带有setTimeout 的字符串——因为它实际上并没有通过element，而是一个字符串化的版本，而且因为它可以很容易地进行代码注入。只需使用回调。

标签： javascript html

【解决方案1】：

所以我认为问题来自于使用来自 setTimeout 的 eval 而不是创建函数

function moveElement(element,finx,finy,interval){
    var xpos = parseInt(element.style.left); 
    var ypos = parseInt(element.style.top);
    if(xpos == finx && ypos == finy) return true;
    if(xpos > finx) xpos--;
    if(xpos < finx) xpos++;
    if(ypos > finy) ypos--;
    if(ypos < finy) ypos++;
    element.style.left = xpos+"px";
    element.style.top = ypos+"px";
    var movement = setTimeout(function () {
        moveElement(element, finx, finy, interval);
    }, interval);

}

但您也可以将附加参数传递给setTimeout，这些参数将传递给您的函数。

function moveElement(element,finx,finy,interval){
    var xpos = parseInt(element.style.left); 
    var ypos = parseInt(element.style.top);
    if(xpos == finx && ypos == finy) return true;
    if(xpos > finx) xpos--;
    if(xpos < finx) xpos++;
    if(ypos > finy) ypos--;
    if(ypos < finy) ypos++;
    element.style.left = xpos+"px";
    element.style.top = ypos+"px";
    var movement = setTimeout(moveElement, interval, element, finx, finy, interval);
}

【讨论】：