我在错误控制台中得到一个未定义的错误

I get an undefined error in my error console

本文关键字：错误 未定义 一个 错误控制 控制台      更新时间：2023-09-26

我的myclickHandler函数工作得很好，但是当我进入错误控制台时，我得到了这个错误:

document.getElementsByName("prequestion")[0] is undefined;

下面是我的代码 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>Create a Session</title>
<script type="text/javascript">
    document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
    function myClickHandler(){
         if(validation()){
            openSessionPopup();
         }
  </script>
    </head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="myClickHandler()"/></p>   
</form>
</body>

我的问题是我需要什么来删除这个错误?因为我的函数可以工作，所以如果它在错误控制台中显示错误，这有关系吗?

很可能在DOM(甚至可能是HTML)正确加载之前加载javascript。

例如，下面的代码会产生与问题中描述的相同的错误:

<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
     alert('test');
    }
</script>
<input type="" name="prequestion" />

，而下面的则不是。错误不存在，代码工作正常。

<input type="" name="prequestion" />
<script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
function myClickHandler(){
     alert('test');
    }
</script>

尝试将事件侦听器附加到技术上还不存在的元素上会导致问题。如果需要，您可以在附加事件之前检查报告页面已加载的浏览器，但请注意浏览器以不同的方式报告此事件。jQuery等库提供了有用的方法来测试这一点，例如$(document).ready(function(){});

编辑:我刚刚看到你也添加了相关的HTML。事实似乎就是如此，您仍然看到预期行为的原因是因为您还在输入元素上使用了onclick=""属性。这是在单击时调用函数的地方，事件处理程序没有像您期望的那样附加。

Edit #2:您的函数似乎也缺少关闭}。现在，我已经用您的精确HTML进行了测试，并将脚本移动到body标签上方解决了错误，并正确地将函数附加到click事件。

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Create a Session</title>
</head>
<body>
<form action="create_session.php" method="post" name="sessionform">
<p><strong>10: </strong><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" /></p>   
</form>
<script type="text/javascript">
    document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
    function myClickHandler(){
         alert('test');
    } // This was missing
  </script>
</body>

我怀疑问题是没有将name属性设置为"prequestion"的元素。

如果你得到这个错误，那么你的脚本实际上没有工作，所以你应该修复它。

相关文章：