Question

当脚本在身体中时，无法弄清AddEventListener错误

2018-08-11

83

javascript html

我正在使用 addEventListner 向表单添加提交按钮，但我遇到了 addEventlister 未定义错误。我测试了元素是否为 true ，结果返回 true 。

这是我的表单：

<form action="POST">
    <input name="name" type="text" autocomplete="given-name">
    <input name="lastname" type="text" autocomplete="given-name">
    <button type="button" id="for_input">Submit</button>
</form>

这是我的 java 脚本：

//Check if the element exists.
var el = document.getElementsByName('for_input');
        if(el) //check if true
            console.log("Value is true"); 
        else
            console.log("Value is false");

//define alert to check click        
var showMe = function(){alert("clicked worked");}; 


el[0].addEventListener("click", showMe,false);

错误：

Uncaught TypeError: Cannot read property 'addEventListener' of undefined

我尝试将其添加到 html 主体中，但仍然收到相同的错误。

Answer 1

您没有任何 for_input 元素名称，但您有一个按钮，其 ID 为 for_input 。因此，请在 document 上使用 querySelector 或 getElementById 方法，而不是 getElementsByName 方法。

var el = document.querySelector('#for_input');
if (el) //check if true
  console.log("Value is true");
else
  console.log("Value is false");

//define alert to check click        
var showMe = function () { alert("clicked worked"); };


el.addEventListener("click", showMe, false);

document.getElementsByName('for_input') 返回 NodeList [] ，该列表已分配给 el ，因为在 document 对象中找不到 name="for_input" 的 html 元素。稍后，当您调用 el[0] 时，它会给您 undefined ，因为 el 有一个空节点列表。因此 undefined.addEventListener(..) 调用导致了您在日志中看到的错误。

Answer 2

您忘记添加名称，您使用的是 id="for_input" 而不是 name="for_input"。

<button type="button" name="for_input">Submit</button>

Answer 3

您缺少名为 for_input 的元素及其按钮 ID，因此请使用 getElementById

var el = document.getElementById('for_input');

现在 el 不是数组，因此无需添加数组位置（如 el[0] ），只需使用 el

el.addEventListener("click", showMe, false);