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

【问题标题】：concat functions with html strings in javascriptjavascript中带有html字符串的concat函数
【发布时间】：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 问题的一个很好的例子。虽然您不能将函数与字符串连接起来，但还有其他方法可以实现您的实际目标（在没有大量样板的情况下向元素添加事件侦听器）。
不允许在元素属性中定义函数。你只能在那里调用函数。

标签： javascript html

【解决方案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);

【讨论】：