javascript中带有html字符串的concat函数

Posted 2023-05-09

【中文标题】javascript中带有html字符串的concat函数

【英文标题】：concat functions with html strings in javascript

【发布时间】：2018-02-02 20:28:35

【问题描述】：

我想在 JS 中编写一些函数，它们返回不同的 html 元素（例如按钮、输入、选择、文本区域），我想以多种形式使用它们。 我希望能够将一个函数传递给在用户与元素交互时在返回的 html 中调用的函数。 例如：一个按钮

// I'm using ES6 syntax

const button = (button_id, button_text, on_click) => 
  return '<button id="' + button_id + '" type="button" onclick="' + on_click + '">' + button_text + '</button>'


button("im_the_button_id", "I'm a button", () =>  console.log('clicked') )

// Looks like this in the browser:
// <button type="button" onclick="function () 
//        console.log('clicked');
//      ">I'm a button</button>

到目前为止一切顺利，当我检查按钮时，返回的 html 显示在我的表单中并且对我（菜鸟）来说看起来不错。 但如果我点击按钮，我会得到一个Uncaught SyntaxError: Unexpected token ( (index):1 在控制台中。 我担心将字符串与函数连接起来会很麻烦，所以我的问题是： 这甚至可能吗？ 或者我是否必须将一个 id 传递给每个元素，并将带有getElementyById() 的 onClick 或 onChange 函数注入我想在我的表单中呈现的元素？

【问题讨论】：

您不能将函数连接到字符串。

创建一个合适的元素并改用addEventListener

你可能想看看像 reactjs 这样的框架。我想说你的问题是 XY 问题的一个很好的例子。虽然您不能将函数与字符串连接起来，但还有其他方法可以实现您的实际目标（在没有大量样板的情况下向元素添加事件侦听器）。

不允许在元素属性中定义函数。你只能在那里调用函数。

【参考方案1】：

在您的示例代码中，您可能可以连接 on_click.toString()，但恕我直言，您最好使用 document.createElement("button") 并以这种方式为其分配属性。

【参考方案2】：

您的按钮方法需要三个参数。当你调用它时，你的第二个参数应该是第三个参数。您忘记传递按钮 ID（第一个参数）。

除此之外，请使用addEventListener。

【参考方案3】：

如果您觉得像 Aerik 建议的那样使用字符串而不是 DOM 元素来创建按钮更舒服，您可以这样做

const button = (button_id,button_text,on_click) => 
    var div = document.createElement('div');
    div.innerHTML = `<button id="$button_id" type="button" >$button_text</button>`;

    var btn = div.childNodes[0];
    // You would like your button to be cross browser compatible.
    if (btn.addEventListener) 
        btn.addEventListener('click', on_click, false); // modern browsers
     else if (btn.attachEvent) 
        btn.attachEvent('onclick', on_click); // old IE
    

    return btn;


let myBtn = button("im_a_button_id", "I'm a button", () => 
    console.log('clicked')
);

document.querySelector('body').appendChild(myBtn);