在javascript中使用html字符串的concat函数

我想在JS中编写一些函数，它返回我想以多种形式使用的不同html元素（例如，button，input，select，textarea）。
我想能够将函数传递给函数，当用户与元素交互时，函数在返回的html中调用。例如：a按钮在javascript中使用html字符串的concat函数

// 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我的形式显示出来，看起来OK我（小白），当我检查的按钮。
但是，如果我点击按钮，我在控制台中得到一个
Uncaught SyntaxError: Unexpected token ( (index):1
。
我担心它会串联一个函数的字符串，所以我的问题是：
这甚至可能吗？
或者我是否必须传递一个id给每个元素，然后将一个onClick或onChange函数用getElementyById()注入到我想要在我的表单中呈现的元素中？

来源

2017-08-24 BigZ

你不能Concat的一个功能，感觉更舒适一个字符串。 – epascarello

创建一个合适的元素并使用'addEventListener'而不是 – adeneo

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

在你的示例代码中，你可能可以连接on_click.toString（），但是，恕我直言，你最好使用document.createElement（“button”）并以这种方式分配属性。

来源

2017-08-24 20:40:39 Aerik

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

除此之外，请使用addEventListener。

来源

2017-08-24 20:41:01 Thijs

如果你使用一个字符串，而不是创建一个DOM元素的按钮Aerik建议你可以做这样的事情

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);

来源

2017-08-24 22:09:42 dimitrisk

在javascript中使用html字符串的concat函数

回答

相关问题