Javascript 通过函数参数用法在jQuery中构建按钮

早上好！我试图创建一个函数，使用jQuery在网页上生成一组按钮。我的示例代码如下。按钮已创建（yay），但未使用value、onclick等参数（boo）。请有更好的技能的人告诉我代码中的错误，好吗？非常感谢你的帮助！我在这里把头撞在墙上

var buttonBar = document.getElementById("ButtonBar");
function genButton (butName, butLabel, action) {
    $('#buttonBar').append
        ('<input type="button" 
        name=butName 
        value = butLabel 
        onclick = action>');
}

genButton('butAsIs', 'Buy As Is', 'funAsIs()');

function funAsIs() {
    window.alert("Buy Me Pressed"); //TestCode 001
}

var buttonBar=document.getElementById（“buttonBar”）；
功能按钮（butName、butLabel、action）{
$（“#按钮栏”）。追加
('');
}
genButton（‘butAsIs’、‘原样购买’、‘funAsIs（）’）；
函数funAsIs（）{
window.alert（“按购买我”）；//TestCode 001
}

在代码中，只附加字符串作为参数，而不是变量。 为了正确的工作，你可以写信

$('#buttonBar').append
    ('<input type="button" name="' + butName + '" value ="' + butLabel  + '" onclick="' + action + '">');

$（'#按钮栏'）。追加
('');

---

或者将es6语法与

${expressions}

一起使用，butName、butLabel和Action作为字符串，而不是代码中的插值变量。这是您的

代码的工作示例：

---

要创建新输入，应使用

document.createElement（“输入”）

  // Let's create an input 
  var element = document.createElement("input");

通过这种方式分配新属性非常容易

  element.type = 'button';
  element.value = butLabel; 
  element.name = butName; 

添加onclick事件有点棘手。我们需要将其封装在函数中，然后才能调用它

  element.onclick = function() { 
    action(actionParams); 
  };


要生成新按钮，我们将使用：

function generateButton(butName, butLabel, action, actionParams) { ... }

例如，我们可以这样调用此函数：

generateButton('yourName', 'yourLabel', popAlert, { alertText: 'hello!', randomStuff: 'random' })

action
是作为参数传递的函数名。现在请记住添加
（）
——此处的重要部分

actionParams
是我们的
action
参数。在我们的例子中，它只是javascript对象
{alertText:'hello！'，randomStuff:'random'}
，您可以传递任何想要的内容

最后，我们将新的输入附加到
#结果
选择器

下面是一个工作示例。运行代码段以查看其工作原理


函数生成按钮（butName、butLabel、action、actionParams）{
//让我们创建一个输入
var元素=document.createElement（“输入”）；
//现在我们分配
element.type='button'；
element.value=butLabel；
element.name=butName；
element.onclick=function（）{
动作（动作参数）；
};
//现在我们附加
var result=document.getElementById（“结果”）；
结果：追加子项（元素）；
}
功能popAlert（参数）{
警报（参数alertText）；
console.log（params.randomStuff）；
}
#结果{
填充：20px；
边框：1px实心#eee；
}
输入[type=“button”]{
保证金：2倍；
}