Develop Reference

Uncaught TypeError: Cannot read property 'addEventListener' of null (multiple forms)

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

It's how you "start" your code. Loaded !== rendered (not 100% sure that these are the correct terms).
Try to wrap it in a self executing function:
(function() {
// Put your code here - dom should be available
})();

Uncaught TypeError: $(...).froalaEditor is not a function// solution is found but not sure how to use it

I just simply want to use froala text editor on my site, but I get Uncaught TypeError: $(...).froalaEditor is not a function.
I googled it and found the solution here but I don't know how to use this source. Mainly because I don't have this anywhere in my code
var $ = require('jquery');
require('node_modules/froala-editor/js/froala_editor.min.js');
$(function() {
var $target = $('<div>').appendTo('body');
$target.froalaEditor()
});
I simply followed the documentation, https://github.com/froala/wysiwyg-editor. I used {{form.media}} at the top to use it but on console I get the above mentioned error. Can someone please tell me how to use the solution in github?

require('node_modules/froala-editor/js/froala_editor.min.js')($);
You see at the end?

Uncaught TypeError: undefined is not a function when moved same code to another site

I have moved my javascript over to another site without modifying it and it should work out of the box as nothing has changed but I keep getting "Uncaught TypeError: undefined is not a function" on two instances.
My first website here works fine.
My second website here does not.
Example with this code as one of the instances but gives me the same error for the same part of code:
<script>
$(document).ready(function(){
$('#clock_sydney').jClocksGMT({offset: '+11'});
$('#clock_greece').jClocksGMT({offset: '+3'});
});
</script>
It is telling me there is something wrong with:
$(document).ready(function(){
On both pieces.
Any help would be greatly appreciated as it is driving me insane.
Thanks so much guys!

Looks like your jQuery is in noConflict mode, thus it cant identify $ symbol
You can use jQuery() instead of $ or wrap your code like this:
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
more info here

You are missing the jQuery reference. It is really easy to identify this kind of errors because it said that $ is undefined and $ is the var which represent the jQuery object.
Just include the respective script in your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Prototype and jQuery conflict with $.when.apply

I have tried multiple combination of usage of code to make the Prototype and jQuery to work, but no luck yet.
Here is what I have currently.
index.html:
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="MAIN_JS_FILE.js"></script>`
main_js_file.js:
jQuery(document).ready(function() {
var jsq = [];
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_1);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_2);
jsq.push(AJAX_CALL_FOR_FETCHING_JS_FILE_3);
var deferredjs = jQuery.when.apply(jQuery, jsq);
deferredjs.done(function() {
//Various variable initialization
//Various function definition.
}
});
Now when page is loaded (page loads properly), chrome console shows an error message:
Uncaught TypeError: undefined is not a function.
When clicked on the error file link, it points to element.dispatchEvent(event); in the prototype.js file, line no 7066.
Any help is appreciated.
Thanks.
Edit: I have changed the MAIN_JS_FILE.js file to use only jQuery instead of $
So now there is not a single javascript code that uses $ and still the undefined error is displayed.
If I now use jQuery.noConflict(); before .ready() function, then the $.when.apply code does not even execute.

As #steven iseki mentioned in comment you, can use jQuery.noConflict. You can read on their website that:
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $.
And it's indeed a case with Prototype also using $ sign.
Also, remember to use jQuery instead of $ sign in your jQuery code, e.g.:
jQuery(selector).on('click', function(){...});

I don't think there's jQuery Conflict error here. Try changing your code from main.js. Try alternate method to get your task done here. I analyzed your code but prototype.js has a way of hiding real thing.

Possible causes of Cannot read property constructor of undefined

I want to iterate over all the forms present in a div. So I am using the following code for this
$('#divid form').each(function (index, formDetails) {
if (formDetails) {
console.log($(formDetails).attr('id'));
}
});
This is working fine in Mozilla with no issues but when I run this code in Chrome sometimes it throws the following error.
This error is coming
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I am using Version 33.0.1750.117 m of Chrome.
Why this error is coming I am not able to understand?

Sounds like you don't have jQuery included before your try and load your functions.
Wrap your javascript code inside the below function:
$(document).ready(function() {
alert('loaded');
}
Also check if the initial is $ or jQuery