Home/ Questions/Q 6829967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T22:33:46+00:00

My myclickHandler function works perfectly but when I go on to my error console

  • 0

My myclickHandler function works perfectly but when I go on to my error console I get this error:

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

Below is my code 

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

My question is what do I need to remove this error? because my function works does it matter if it shows an error in the error console?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Chances are you’re loading the javascript before the DOM (or even possibly the HTML) has loaded properly.

    For example, the following reproduces the same error as described in your question :

    <script type="text/javascript">
document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);

function myClickHandler(){
     alert('test');
    }
</script>
<input type="" name="prequestion" />

    Whereas the following does not. The error is not present and the code works fine.

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

function myClickHandler(){
     alert('test');
    }
</script>

    Trying to attach the event listener to an element which doesn’t technically exist yet causes problems. You can check for the browser reporting the page has been loaded before attaching the event if needs be but be aware that browsers report this in different ways. Librarys such as jQuery provide useful means to test this such as $(document).ready(function(){});

    Edit: I’ve just seen that you’ve added the relevant HTML too. It appears that this is in fact the case and the reason you’re still seeing the expected behavior is because you’re also using the onclick="" attribute on the input element. This is where the function is being called on click, and the event handler isn’t being attached as you expect.

    Edit #2: You also appear to be missing a closing } for your function. And I’ve now tested with your exact HTML and moving the script to just above the body tag resolves the error and correctly attaches the function to the click event.

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