CODEWITHSUNDEEP
javascriptfunction
BruceyBandit
BruceyBandit

Reputation: 4324

I get an undefined error in my error console

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?

Upvotes: 0

Views: 94

Answers (2)

Ben Swinburne
Ben Swinburne

Reputation: 26467

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>

Upvotes: 2

Pointy
Pointy

Reputation: 413712

I suspect that the problem is that there are no elements with the name attribute set to "prequestion".

If you're getting that error, then your script doesn't actually work, so you should fix it.

Upvotes: 0

Related Questions