JS Input keypress event - Cannot read property 'addEventListener' of null

Question

I have created a search function for my Site and originally just had it set up as a Form Element using POST to send the variable to my search page. However, this would just give me a plain URL at search.php. So if the clicked on something and then went back there would be no posted variable so no more search results.

I wanted to improve this so if they click on something and go back it will be going back to the URL of search.php?term=search%20term which will then treat it as a GET variable so it will show the results again and it can be used to go search for something directly in the URL bar.

(NOTE: I have rewrite rules to change search.php?term=search%20term to search/search%20term. I also have two search bars one displayed for mobile and one for desktop)

So I changed my code to the following:

function search(x){
    if(x=="search"){
        var search_term = document.getElementById('searchbox').value;
    }else if(x=="mini_search"){
        var search_term = document.getElementById('minisearchbox').value;
    }
    if(search_term != ""){
        window.location.href = "search/"+search_term;
    }
}

<div id="search">
    <input type="text" placeholder="Product Search" name="search" id="searchbox">
    <input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('search'); return false;">
</div>
<div id="minisearch">
    <input type="text" placeholder="Product Search" name="search" id="minisearchbox">
    <input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('mini_search'); return false;">
</div>

This is working fine as expected but obviously now with the return false statement it won't search when a user presses enter which I want them to be able to do.

So I tried adding the following code:

document.getElementById('searchbox').addEventListener('keypress', function(key){
    if(key.keycode==13){
        search(search);
    }
});
document.getElementById('minisearchbox').addEventListener('keypress', function(key){
    if(key.keycode==13){
        search(mini_search);
    }
});

However, I now get the error saying Uncaught TypeError: Cannot read property 'addEventListener' of null and I am not sure what could be causing this.

This means that `getElementById` is returning `undefined`. Does an element with that *exact* ID exist in the document? — Ozzy Walsh, Jun 19 '18 at 08:53
@OzzyWalsh No, that means that `getElementById` is returning `null`. — CertainPerformance, Jun 19 '18 at 08:54
You didn't put the html code into the new snippet, so document.getElementById get no element. — Terry Wei, Jun 19 '18 at 08:55
If the element is definitely defined, the code may be running before the document has loaded. Try moving your script to the end of the body tag. — Ozzy Walsh, Jun 19 '18 at 08:56
Thanks for your comments, as you can see in the first snippet the HTML includes the two elements with ID's `searchbox` and `minisearchbox` so am unsure why this is happening. — Paddy Hallihan, Jun 19 '18 at 08:56

score 2 · Accepted Answer · answered Jun 19 '18 at 08:58

2

If an element with that ID definitely exists, then the script might be running before the DOM has loaded.

Try wrapping the code in:

document.addEventListener("DOMContentLoaded", function(event) { 
  // Your code here
});

answered Jun 19 '18 at 08:58

Ozzy Walsh

787
8
16

Thanks this worked but I was missing the quotes as well – Paddy Hallihan Jun 19 '18 at 09:20

Akhil Aravind · Answer 2 · 2018-06-19T09:04:21.220

You may have done it incorrectly, try this, you have to pass string in quotes, you missed that part

var _search = document.getElementById('searchbox');
_search.addEventListener('keypress', function(key){
  if(key.keyCode==13){
  search('search');
 }
});
var mini_search = document.getElementById('minisearchbox');
mini_search.addEventListener('keypress', function(key){
 if(key.keyCcode==13){
  search('mini_search');
 }
});

function search(x){
 if(x=="search"){
  var search_term = document.getElementById('searchbox').value;
 }else if(x=="mini_search"){
  var search_term = document.getElementById('minisearchbox').value;
 }
 if(search_term != ""){
    console.log(search_term);
  window.location.href = "search/"+search_term;
 }
}

<div id="search">
<input type="text" placeholder="Product Search" name="search" id="searchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('search'); return false;">
</div>
<div id="minisearch">
<input type="text" placeholder="Product Search" name="search" id="minisearchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('mini_search'); return false;">
</div>

Hi thanks I missed the quotes but the main issue was the DOM wasn't loaded fully so I wrapped it in a function like the one suggested in the answer I accepted but +1 for the quotes and to cancel out whoever down voted you ;) — Paddy Hallihan, Jun 19 '18 at 09:18

JS Input keypress event - Cannot read property 'addEventListener' of null

2 Answers2