时间戳

首页 > 解决方案 > 不使用 getAttribute('name') 捕获第二个表单属性名称；

javascript - 不使用 getAttribute('name') 捕获第二个表单属性名称；

问题描述

我只是在查看一个项目的 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但没有捕获第二个表单的名称，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();

标签： javascript

解决方案

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()在匿名函数上使用。

推荐阅读