Question

所以我是一个超级JS菜鸟，我甚至不确定我是否正确地问这个问题，但是......

我正在尝试动态创建按钮，然后将其onclick事件侦听器设置为一组预定功能之一。我希望能够通过以下两种方式之一做到这一点：

var newInput = document.createElement('input');
newInput.parameters = "xyz";
document.getElementById("element").appendChild(newInput);
newInput.onclick = "funcsnip" + array[variable] + "()";

或者，或者，

var newInput = document.createElement('input');
newInput.parameters = "xyz";
document.getElementById("element").appendChild(newInput);
newInput.onclick = array[variable];

数组中备有＆＃34; myFunction（）＆＃34;原语。

我毫不怀疑我有＃100;应该＆＃34;正在做，但我对我的大部分代码感到满意，我只想知道如何将字符串作为onclick的参数传递，如果可能的话。

或者，如果不可能，将onclick事件附加到动态输入元素的另一种方法。

越简单越优雅越好。谢谢！

Answer 1

您无法将字符串传递给onclick侦听器。它应该是一个功能。你可以做的是创建一个功能图。

我们假设您有这些功能：

function oneFunc() { console.log('one');
function twoFunc() { console.log('two');

然后你可以创建一个映射：

var map = {
  one : oneFunc,
  two : twoFunc
};

因此，您可以致电oneFunc或map.one来访问map["one"]。

现在解决问题非常简单

var newInput = document.createElement('input');
var variable = "one";
// var variable = "two";
newInput.parameters = "xyz";
document.getElementById("element").appendChild(newInput);
// You pass an actual function, but using a string parameter.
newInput.onclick = map[variable];

当您点击按钮时，您会看到＆＃34;一个＆＃34;在控制台中。

Answer 2

如果每个代表一个函数的按钮都有一个字符串，则可以编写

var functionCollection = {
  'stringOne': function() {
   ...
  }
}

...

newInput.onclick = functionCollection[myStringValue];

或者您可以创建一个处理函数并通过绑定使用字符串类型调用它，例如

function clickHandler(stringValue) {
  switch (stringValue) {
    case 'stringOne':
      return someSpecialFunction();
    ...
  }
}

...

newInput.onclick = clickHandler.bind(this, myStringValue);

Answer 3

newInput。 setAttribute （＆＃34; onclick＆＃34;，＆＃34; alert（1）＆＃34;）和newInput.setAttribute（＆＃34; onclick＆＃34; ，＆＃34; function（）{alert（1）}＆＃34;会工作。你的代码无法正常工作，因为你试图在onclick 属性上设置一个函数字符串，它需要一个真正的函数对象。

话虽如此，你真的应该使用addEventListener，或像jquery一样的抽象。

Javascript - 使用字符串来原型化函数

3 个答案: