Question

我编写了以下代码，以便生成一个动态提交按钮，该按钮会在点击时发送电子邮件，但它不起作用。

    function createbuttomdyanmic()
    {

        var button = document.createElement('input');
        button.setAttribute('type', 'submit');
        button.setAttribute('ID', 'btnSendMail');
        button.setAttribute('value', 'Send Mail');
        button.setAttribute('onclick', 'btnSendMail_Click');
        document.body.appendChild(button);
        button.setAttribute("class", "btn btn-primary");
        $('#button').addClass('myClass');

    }

另外，我需要添加这种风格，但它也没有出现。

 margin-left:1407px;
    width:98px;

Answer 1

您的代码中需要修复一些要点：

我们不会使用setAttribute()方法设置事件处理程序。

您可以像这样使用 addEventListener() ：

button.addEventListener('click', btnSendMail_Click);

或onclick喜欢这样：

button.onclick = function(){ 
   btnSendMail_Click()
};

您可以使用.classList将类添加到给定元素，而不是使用setAttribute("class")。

像这样：

button.classList.Add("btn", "btn-primary");

如果您的button不属于任何form，您只需要使用 type="button"，否则只需将其放在form元素中，因为submit按钮通常用于提交表单。

Answer 2

实际上，代码运行得很好 - 只是一些更正和建议，如下所示：

有一个提交按钮意味着它应该是一个表单的元素，尽管您可以使用＆＃34;表单＆＃34;将它放在HTML5表单之外。属性。

下一段代码似乎无关紧要，因为它是jQuery的唯一一行，它引用了一个id为＆＃34; button＆＃34;然而，提交按钮的ID为＆＃34; btnSendMail＆＃34;所以我评价了它：

//$('#button').addClass('myClass');

创建动态提交按钮的函数名称似乎有拼写错误。如果你在没有输入错误的代码中调用该函数，那么该函数将不会执行。因此，在名称清楚之前，我删除了名称，将其完全转换为匿名函数。

使用setAttribute（）设置onclick事件属性的值没有任何问题。另一种方法是使用addEventListener（）;两者都运行良好，除了setAttribute（）是两者中较快的一个;见here。虽然提交按钮通常用于提交表单，但只要提供一个＆＃34;形成＆＃34;属性，如果您更喜欢将浏览器重定向到网址，即使是javascript网址也可以！

最后，你提供了CSS代码而没有说明它应该属于哪个类，所以我冒昧地把它变成了.btn类的样式。我也更改了代码，因此我的老式显示器几乎不会隐藏按钮。我也添加了一些颜色，使按钮脱颖而出进行测试。

＆＃13;

function btnSendMail_Click() {
  console.log('Button clicked; email sent');
}

(function() {

  var button = document.createElement('input');
  button.setAttribute('type', 'submit');
  button.setAttribute('ID', 'btnSendMail');
  button.setAttribute('value', 'Send Mail');
  button.setAttribute('onclick', 'btnSendMail_Click()');
  button.setAttribute('form', 'myform');
  document.body.appendChild(button);
  button.setAttribute("class", "btn btn-primary");
  button.setAttribute("formaction", "javascript: console.log('bye');")
  //$('#button').addClass('myClass');

}());

＆＃13;

.btn {
  margin-left: 207px;
  width: 98px;
  height: 48px;
  background: red;
  color: #fff;
}

＆＃13;

<form id="myform">

</form>

＆＃13;

如何使用“onclick”事件属性动态创建提交按钮？

2 个答案: