Question

我的myclickHandler功能完美无缺，但当我进入错误控制台时出现此错误：

document.getElementsByName（“prequestion”）[0]未定义;

以下是我的代码

<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>

我的问题是我需要删除此错误？因为如果在错误控制台中显示错误，我的函数是否有效呢？

Answer 1

您可能在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=""属性。这是在单击时调用函数的位置，并且事件处理程序未按预期附加。

编辑＃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>

Answer 2

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

如果您收到该错误，那么您的脚本实际上无法正常工作，因此您应该修复它。

我的错误控制台中出现未定义的错误

2 个答案: