We Keep Coding

Event listener not firing on click

I am creating a simple function to close a flash message div on click event, but my listener is not firing.
I wrote 3 different functions to try to get it working, but nothing is happening and Chrome console isnt telling me anything.
My first was in ES6 class style, this one:
class closeFlashMessages {
constructor () {
this.getFlashMessages = document.querySelector("#flash-messages");
this.addEventListeners();
}
close () {
console.log(this.getFlashMessages);
this.getFlashMessages.className = "hide";
}
addEventListeners () {
if(this.getFlashMessages)
this.getFlashMessages.addEventListener("click", this.close);
}
}
new closeFlashMessages();
My second was this:
(function (){
let getFlashMessages = document.querySelector("#flash-messages");
function close () {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
function addEventListeners () {
getFlashMessages.addEventListener("click", function () {
close()
});
}
addEventListeners();
});
My last one is this:
(function (){
let getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", close(getFlashMessages));
function close (id) {
console.log(getFlashMessages);
getFlashMessages.className = "hide";
}
});
My HTML:
<div id="flash-messages">
<div class="flash success">
<p>Recept byl přidán do nákupního seznamu.</p>
</div>
</div>
But none of them worked!! I dont understand
With the first two, I was getting undefined on my this.getFlashMessages also not sure why.

My solution is not in ES6
function Init(){
var id = document.getElementById('flash-messages');
var msg = document.querySelector('.flash');
id.addEventListener('click',function(){
msg.className = 'hide';
});
}
Init();
see demo here

I am not very much familiar with ES6.
But if I try similar code sample on a javascript it will be as given below and I hope it will be almost similar in ES6 aswell.
var getFlashMessages = document.getElementById("flash-messages");
getFlashMessages.addEventListener("click", function()
{
clicked(getFlashMessages);
});
function clicked(id){
console.log(id);
id.className = "hide";
}
Here, I am calling anonymous function, and its default argument will be event object as given in https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

Issue on Toggling Two Functions in jQuery

Can you please take a look at this demo and let ma know how I can call/toggle two functions from outside of the toggle()
function printConsole() {
console.log("This is From Function A");
}
function printAlert() {
alert("This is From Function B");
}
$("#toggler").toggle(
printConsole(); printAlert();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="toggler">Toggle Fnctions</button>

Try storing functions in an array , utilizing .click() , Array.prototype.reverse()
function printConsole() {
console.log("This is From Function A");
}
function printAlert() {
alert("This is From Function B");
}
var fns = [printConsole, printAlert];
$("#toggler").click(function() {
fns[0]();
fns.reverse();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id="toggler">Toggle Fnctions</button>

Depreciated in jquery 1.8
use comma, try this code:
$("#toggler").toggle(
function() {
console.log("This is From Function A");
},function() {
alert("This is From Function B");
}
);
reference: https://api.jquery.com/toggle-event/
Update
Use this Instead:
var clicks = true;
$('a').click(function() {
if (clicks) {
alert('Function A');
clicks = false;
} else {
alert('Function B');
clicks = true;
}
});
reference: Alternative to jQuery's .toggle() method that supports eventData?

Jquery prototype conflict with new function

I'm trying to make a complementary library to jQuery but not jQuery plugin, nor jQuery extension:
First Function:
function w(id) {
return $(id);
}
It works as jQuery plugin:
$.prototype.test = function(){
console.log("testing");
}
w("div").test(); // test
What I want is this, as a prototype function of w(), but doesn't works:
w.prototype.test = function(){
console.log("testing");
}
w("div").test(); // test
Thanks,
.........................................
It works with:
w.prototype = jQuery.prototype;
Thanks SLaks!
But when it does, doesn't works with:
w.prototype = {
test: function(){
console.log("testing");
}}
.......................
Now it's works;
function w(id) {
return $(id);
}
w.prototype = jQuery.prototype;
w.prototype.extend({
test:function(){
console.log("testing");
}
});
Thanks for help!!!

You want
w.prototype = jQuery.prototype;

show() is undefined because of custom plugin

I wrote this plugin to catch show event only for div_loading_page element:
(function ($) {
$.each(['show'], function (i, ev) {
var el = $.fn[ev];
$.fn[ev] = function () {
this.each(function () {
if (this.id == 'div_loading_page') {
$(this).trigger(ev);
return false; // break out of the loop
}
});
//alert(this.id);
el.apply(this, arguments);
};
});
})(jQuery);
It's working fine but because of it i get following error:
$cluetipTitle.show() is undefined , which is from cluetip jquery plugin. Any idea how can i resolve this conflict?

Change:
el.apply(this, arguments);
To
return el.apply(this, arguments);
This ensure that the original function's return value is reserved and will not cause unexpected behavior

change this
$.each(['show']
to
return $.each(['show']
this will allow for chaining, ie doing what you want to do with the .show

jquery, how to trigger function from a button click?

i have this example:
<script>
$('.myvideos').live('click', function() {
$('#myvideos').trigger('click');
var ide = '123';
function ajax_request() {
$('#placeholder').load("test.php?id=ide");
}
});
</script>
how can i trigger the ajax_request function after $('#myvideos').trigger('click'); happens and pass the ide var to load link?
any ideas?
thanks

Try:
<script>
$('.myvideos').live('click', function() {
var ide = '123';
ajax_request(ide);
});
function ajax_request(ide) {
$('#placeholder').load("test.php?id="+ide);
}
</script>

<script>
$('.myvideos').live('click', function() {
var ide = '123';
ajax_request(ide)
});
function ajax_request(ide) {
$('#placeholder').load("test.php?id=" + ide);
}
</script>

You don't really have to put the AJAX call inside a function
<script>
$('.myvideos').live('click', function() {
$('#myvideos').trigger('click');
var ide = '123';
$('#placeholder').load("test.php?id=" + ide);
});
</script>