Question

我用javascript动态创建了一个表单。现在，我必须在单击按钮上添加表单上的验证（仅强制验证），该按钮也是动态创建的。现在我面临的问题是每当我尝试在创建它之后立即在按钮上添加addEventListener时，它就会给我错误。（ function init（）{

    console.log("div created"); 

    // create a new div element
    var newDiv = document.createElement("div");
    newDiv.id = "registration_form";

    var createForm = document.createElement("form");
    newDiv.appendChild(createForm);

    var heading = document.createElement("h2");
    heading.innerHTML = "Registration Form";
    createForm.appendChild(heading);

    var linebreak = document.createElement('br');
    createForm.appendChild(linebreak);

    createElement(createForm, 'label','','','Name: ');
    createElement(createForm, 'text', 'dname', '','');
    createSpanTag(createForm,'nameError');
    breakTag(createForm);breakTag(createForm);
    createElement(createForm, 'label','','','Email: ');
    createElement(createForm, 'email', 'email', '','');
    createSpanTag(createForm,'emailError');
    createElement(createForm, 'button','Validate','Validate','');
    document.getElementsByTagName('button')[0].addEventListener('click',validate());
    document.getElementsByTagName('body')[0].appendChild(newDiv);

}
)();

function createElement(formElement,type,name,value, placeholder) {
if(type=='label'){
    var element=document.createElement(type);
    if(name!='' && value!=''){
        element.setAttribute('name',name);
        element.setAttribute('value',value);
    }
    element.innerHTML=placeholder;
    formElement.appendChild(element);
} else {
    var element=document.createElement('input');
    if(type!=''){
        element.setAttribute('type',type);
    }
    if(name!=''){
        element.setAttribute('name',name);
    }
    if(value!=''){
        element.setAttribute('value',value);
    }
    if(placeholder!=''){
        element.setAttribute('placeholder',placeholder);        
    }
    formElement.appendChild(element);
} 

}

function breakTag(createForm){
createForm.appendChild(document.createElement('br'));
}

function validate(){

}
function createSpanTag(createForm, id){
    var element=document.createElement('span');
    element.setAttribute('id',id);
    createForm.appendChild(element);
}

Answer 1

addEventListener的第二个参数需要是一个函数。改变......

document.getElementsByTagName('button')[0].addEventListener('click',validate())

到...

document.getElementsByTagName('button')[0].addEventListener('click',validate);

Answer 2

由于您的代码名称为input，而非button。因此，在函数input的参数中使用getElementsByTagName()，然后遍历所有节点并找到type = button的节点。

尝试更改此行：

document.getElementsByTagName('button')[0].addEventListener('click',validate());

为：

    var nodeList = document.getElementsByTagName("input");

    for (var i = 0; i < nodeList.length; i++)
    {
       if (nodeList[i].getAttribute("type") == "button") {
       {
          nodeList[i].addEventListener('click',validate);
       }
    }

使用Javascript在动态创建的表单上添加验证

2 个答案: