Hello fellow developers,
I have a simple question. I'm working on my javascript skills, which are obviously not the best :). I'm trying to code a search box with the giphy API, by tutorial. My code was working to 100% like the code displayed in the tutorial until video 5, but now (video 6) it's not working anymore.
I'm getting the error "Uncaught TypeError: Cannot read property 'addEventListener' of null". I googled a lot and tried the fixes which I found here, but they are not working on my code :/ The funny part of this is, that my code is working on codepen.io! So the only difference between codepen and my local website, are multiple search forms and bootstrap. So I'm guessing the problem are multiple search forms, because of this lines:
const searchGif = document.getElementById("search-gif");
const searchInput = document.getElementById("gif-search-string");
searchGif.addEventListener('submit', function(event){
event.preventDefault();
const query = searchInput.value;
search(query);
})
But I thought because I'm grabbing the right form by ID before I execute the rest of my javascript code, it is ok? So I hope that you can help me to resolve my problem. Like I said, I'm not very good in JS and just trying to get better and better <3.
PS: loading my script by script tag at the end of the html body PS2: Here is my complete HTML Code -> index.php - timeline-gif.php