Question

我只是在查看项目的JavaScript事件，但是有某些原因我无法找到它为什么不起作用或无法通过getAttribute（'name'）显示事件的原因，如果应该的话，像这样：

<form name='otherRegistration'>
    <input type="email"></input> 
    <button class="btn btn-safe col-xs-6"></button>
</form>

<form name='registration'>
    <button class="btn btn-security col-xs-6"></button>
</form>

问题是，如果它捕获第一个表单名称otherRegistration的name属性，但没有捕获第二个表单registration的名称，这很奇怪，我不知道为什么发生这种情况，我已经仔细检查并找不到原因。

一旦具有表单的属性名称，就不会输入我不理解的if，因为如果它用typeof修改并返回字符串

如果您能帮助我理解为什么以及什么是解决方案，请在此处提供代码：

function userSessionSubmit() {

    var form = document.querySelector('form');
    var formName = '';

    form.addEventListener('click', function () {
        formName = form.getAttribute('name');

        console.log(formName);

        switch (formName) {
            case 'otherRegistration':
                alert('TRIGGER OTHER'); //works 
                break;
            case 'registration':
                alert('TRIGGER REGIS'); //does not work...
                break;
            default:
                alert('nothing');
                break;
        }
    });
};

userSessionSubmit();

Answer 1

document.querySelector(selector)选择一个元素-页面上找到的第一个元素。

要通过一个查询选择多个元素，应使用document.querySelectorAll(selector)并将其分配给变量。

示例代码：

const forms = document.querySelectorAll('form'); // select all forms on the page
Array.prototype.forEach.call(forms, (form) => {
   form.addEventListener('click', listenerFunc); // add on click listener to every form
}); // iterate trough found elements

编辑：

您应该考虑在侦听器中使用匿名函数-您不能在匿名函数上使用removeEventListener()。

不使用getAttribute（'name'）捕获第二个表单属性名称；

1 个答案: