How to prevent an eventListner for the first time on pageLoad In JS

Question

i have used preventDefault() but thats not working here is My Code

btnBookNameSearch.addEventListener("click", (e) => {
    e.preventDefault();
    const searchValue = btnBookNameSearch.value.toLowerCase().trim();
 
    allPgBooks.forEach((product) => {
        if (product.name == searchValue) {
            allPgBooksE2.innerHTML = '';
            if (allPgBooksE2) { 

there is a mistake i am doing in the first two line of code above but idk how to fix ....the Error i am getting is ....Cannot read properties of null (reading 'addEventListener') ...

Answer 1

Your btnBookNamsSearch is null. Probably you trying to find the button by wrong id or selector.

Answer 2

It just means that the variable btnBookNameSearch is empty. It couldn't find the element that supposed to be inside that variable. It could be typo in the way you retrieved the element, e.g. document.querySelector('.element-class').

Answer 3

use DOMContentLoaded event. Add your code inside the callback function

document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run, DOM is loaded and ready
   btnBookNameSearch.addEventListener("click", (e) => {
   e.preventDefault();
   const searchValue = btnBookNameSearch.value.toLowerCase().trim();
   .....
   .....
});