Скорее всего, вы загружаете JavaScript до того, как DOM (или, возможно, HTML) загрузится правильно.
Например, следующее воспроизводит ту же ошибку, что и описанную в вашем вопросе:
<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>