这是咋了这，为啥报错：Uncaught SyntaxError:Unexpected token '{'

Question

为什么出错

funtion(text, size, l, h){
    let b1 = document.createElement("div"), b2 = document.createElement("div");
    b1.setAttribute("class", "button1");
    b2.setAttribute("class", "button2");
    let agent = document.createElement("div");
    agent.setAttribute("class", "agent");
    agent.setAttribute("style", `position:relative;top:${h}px;`);
    let txt = document.createElement("span");
    txt.setAttribute("class", "txt");
    txt.setAttribute("style", "position:absolute;top:30px;");
    ui.setSize(agent, size, 2, 1);
    agent.style.backgroundColor = "grey";
    agent.style.left = l;
    txt.innerHTML = text;
    var x = l +(size / 2);
    b1.setAttribute("style", `position:absolute;`);
    b2.setAttribute("style", `position:absolute;`);
    b1.style.left = '-1px';
    b2.style.left = `${size / 2 + 1}px`;
    b1.style.top = `${size / 2}px`;
    b2.style.top = `${size / 2}px`;
    var os = size / 2;
    ui.setSize(b1, os, 2, 1);
    ui.setSize(b2, os, 2, 1);
    b1.style.backgroundColor = "#555";
    b2.style.backgroundColor = "#555";
  }

Answer 1

引自免费微信小程序：皆我百晓生

当然，您在JavaScript代码中遇到了一个语法错误：Uncaught SyntaxError: Unexpected token '{'

错误原因： 这个错误通常意味着解析器在预期的某个结构结尾时遇到了一个新的花括号 {。在您的代码片段中，问题在于函数定义的开头处拼写错误。正确的关键字应该是 function，而不是 funtion。

修复后的代码应如下所示：

function createUIElement(text, size, l, h) {
    let b1 = document.createElement("div"), 
        b2 = document.createElement("div");
    b1.setAttribute("class", "button1");
    b2.setAttribute("class", "button2");
    let agent = document.createElement("div");
    agent.setAttribute("class", "agent");
    agent.setAttribute("style", `position:relative;top:${h}px;`);
    let txt = document.createElement("span");
    txt.setAttribute("class", "txt");
    txt.setAttribute("style", "position:absolute;top:30px;");
    // 假设ui.setSize是已存在的设置大小的方法
    ui.setSize(agent, size, 2, 1);
    agent.style.backgroundColor = "grey";
    agent.style.left = l;
    txt.innerHTML = text;
    var x = l + (size / 2);
    b1.setAttribute("style", `position:absolute;`);
    b2.setAttribute("style", `position:absolute;`);
    b1.style.left = '-1px';
    b2.style.left = `${size / 2 + 1}px`;
    b1.style.top = `${size / 2}px`;
    b2.style.top = `${size / 2}px`;
    var os = size / 2;
    ui.setSize(b1, os, 2, 1);
    ui.setSize(b2, os, 2, 1);
    b1.style.backgroundColor = "#555";
    b2.style.backgroundColor = "#555";
}

// 示例调用该函数（假设ui对象已经存在）
createUIElement('Hello World!', 200, 50, 100);

现在，这个函数定义的语法是正确的，并且可以被正确地解析和执行。然而，需要注意的是，这段代码没有返回任何值也没有将创建的元素添加到DOM树中。如果您需要这些元素显示在页面上，还需要调用类似 document.body.appendChild(agent) 的方法来将它们插入到文档中适当的位置。