How can I make it so that addEventListener() has two functions inside it?
Wrap your functions in a function.
const invokeMe = () => console.log('I live here outside the scope');
const alsoInvokeMe = () => console.log('I also live outside the scope');
element.addEventListener('event',() => {
invokeMe();
alsoInvokeMe();
});
Two major differences between the older model and the newer DOM Level 2 event
model is that 1) the newer model isn’t as dependent on a specific event handler property, and 2) you can register multiple event handler functions for any one event on any one object.(From: Learning JavaScript) For example:
<!DOCTYPE html>
<html>
<body>
<div id="myElement"> Please click here.</div>
<script>
function func0() {
alert("Function0 is called");
}
function func1() {
alert("Function1 is called");
}
document.getElementById("myElement").addEventListener("click", func0, true);
document.getElementById("myElement").addEventListener("click", func1, true);
</script>
</body>
</html>
As, even you can remove a specific event handler function for one event on any one object. For example:
<!DOCTYPE html>
<html>
<body>
<div id="myElement"> Please click here.</div>
<script>
function func0() {
alert("Function0 is called");
}
function func1() {
alert("Function1 is called");
}
document.getElementById("myElement").addEventListener("click", func0, true);
document.getElementById("myElement").addEventListener("click", func1, true);
document.getElementById("myElement").removeEventListener("click", func0, true);
</script>
</body>
</html>
Wrap your functions in a function. But need to send all params from addEventListener callback (paramter event)
const callbackOne = (...props) => {
console.log('callbackOne', ...props)
};
const callbackTwo = (...props) => {
console.log('callbackTwo', ...props)
};
element.addEventListener('eventName',(...props) => {
callbackOne(...props);
callbackTwo(...props);
});
You
Related
Is there any way to use the onclick html attribute to call more than one JavaScript function?
onclick="doSomething();doSomethingElse();"
But really, you're better off not using onclick at all and attaching the event handler to the DOM node through your Javascript code. This is known as unobtrusive javascript.
A link with 1 function defined
Click me To fire some functions
Firing multiple functions from someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
This is the code required if you're using only JavaScript and not jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
I would use the element.addEventListener method to link it to a function. From that function you can call multiple functions.
The advantage I see in binding an event to a single function and then calling multiple functions is that you can perform some error checking, have some if else statements so that some functions only get called if certain criteria are met.
Sure, simply bind multiple listeners to it.
Short cutting with jQuery
$("#id").bind("click", function() {
alert("Event 1");
});
$(".foo").bind("click", function() {
alert("Foo class");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>
ES6 React
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>
var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
console.log("Method 2");
}
function method1(){
console.log("Method 1");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>
You can achieve/call one event with one or more methods.
You can add multiple only by code even if you have the second onclick atribute in the html it gets ignored, and click2 triggered never gets printed, you could add one on action the mousedown but that is just an workaround.
So the best to do is add them by code as in:
var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);
<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");' > Click me</button>
You need to take care as the events can pile up, and if you would add many events you can loose count of the order they are ran.
One addition, for maintainable JavaScript is using a named function.
This is the example of the anonymous function:
var el = document.getElementById('id');
// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });
But imagine you have a couple of them attached to that same element and want to remove one of them. It is not possible to remove a single anonymous function from that event listener.
Instead, you can use named functions:
var el = document.getElementById('id');
// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };
// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);
// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);
This also keeps your code a lot easier to read and maintain. Especially if your function is larger.
React Functional components
<Button
onClick={() => {
cancelAppointment();
handlerModal();
}}
>
Cancel
</Button>
const callDouble = () =>{
increaseHandler();
addToBasket();
}
<button onClick={callDouble} > Click </button>
It's worked for me, you can call multiple functions in a single function. then call that single function.
Here is another answer that attaches the click event to the DOM node in a .js file. It has a function, callAll, that is used to call each function:
const btn = document.querySelector('.btn');
const callAll =
(...fns) =>
(...args) =>
fns.forEach(fn => fn?.(...args));
function logHello() {
console.log('hello');
}
function logBye() {
console.log('bye');
}
btn.addEventListener('click',
callAll(logHello, logBye)
);
<button type="button" class="btn">
Click me
</button>
You can compose all the functions into one and call them.Libraries like Ramdajs has a function to compose multiple functions into one.
Click me To fire some functions
or you can put the composition as a seperate function in js file and call it
const newFunction = R.compose(fn1,fn2,fn3);
Click me To fire some functions
This is alternative of brad anser - you can use comma as follows
onclick="funA(), funB(), ..."
however is better to NOT use this approach - for small projects you can use onclick only in case of one function calling (more: updated unobtrusive javascript).
function funA() {
console.log('A');
}
function funB(clickedElement) {
console.log('B: ' + clickedElement.innerText);
}
function funC(cilckEvent) {
console.log('C: ' + cilckEvent.timeStamp);
}
div {cursor:pointer}
<div onclick="funA(), funB(this), funC(event)">Click me</div>
I have written a small and simple slider with Javascript. Because I want to be sure that the slider works when I load the javascript in the footer of the page. I added an onload event and copied the whole slider application inside the event. In the HTML I unfortunately have an inline onclick element in a tag. But since I have the code inside the onload scope the onclick doesn't work anymore. My idea is not to bind the event inline in the html but directly in the javascript. That should work. But I am also interested if it is possible to do it with the inline onclick.
Question What do I have to do so that the onclick element addresses the corresponding function within the onclick function?
document.querySelector('body').onload = function() {
function init() {
// ...
}
const f2 = function() {
// ...
}
init();
/* that will work */
const anchorPrev = document.querySelector('.prev');
anchorPrev.addEventListener('click', () => {
console.log('prev');
});
/* My question */
function next() {
console.log('next')
}
};
a {
cursor: pointer;
}
<body>
<a class="next" onclick="next()">next (I'm curious to know if it works!?)</a><br/>
<a class="prev">prev (Will work)</a>
</body>
Two issues:
It's better to wait for the DOMContentLoaded event on the window object.
You're defining the function within the scope of the function, so it's not globally accessible. This means that the onclick can't see the function. Use a let variable, then set the function inside the listener callback like this:
<button onclick="log()">click me</button>
<script>
let log;
window.addEventListener('DOMContentLoaded', () => {
console.log('loaded');
log = () => console.log('clicked');
});
</script>
You can add that the onload event = function next()
JavaSript code:
document.querySelector('body').onload = function() {
const a = document.querySelector('a')
a.onclick = function next() {
event.preventDefault()
console.log('next')
}
};
This question already has answers here:
How to pass parameter to function using in addEventListener?
(4 answers)
What is the difference between a function call and function reference?
(6 answers)
Closed 3 months ago.
I have this code for Google analytics on a button. I need it to be executed only once, so that the user can't change statistics by pressing the button many times. I tried solutions from similar topics, but they don't work. Please help. This is my code.
<script>
function klikaj(i) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
}
document.body.addEventListener("click", klikaj(i), {once:true})
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">My button</div>
Remove onclick attribute on your button and register listener via JavaScript, as you tried to do:
<div id="thumb0" class="thumbs"
style="border: 1px solid; cursor: pointer; float: left">
My button
</div>
<script>
function klikaj(i) {
console.log(i);
}
document.getElementById('thumb0')
.addEventListener("click", function(event) {
klikaj('rad1');
}, {once: true});
</script>
If your browser doesn't support { once: true } option, you can remove event listener manually:
<div id="thumb0" class="thumbs"
style="border: 1px solid;cursor: pointer;float:left">
My button
</div>
<script>
function klikaj(i) {
console.log(i);
}
function onClick(event) {
klikaj('rad1');
document
.getElementById('thumb0')
.removeEventListener("click", onClick);
}
document
.getElementById('thumb0')
.addEventListener("click", onClick);
</script>
you could use removeAttribute() like this: document.getElementById('thumb0').removeAttribute("onclick");
or you could let the function return false like this: document.getElementById('thumb0').onclick = ()=> false
I would recommend setting a variable and checking its value.
<script>
var clicked = false;
function klikaj(i) {
if (clicked === false) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
}
clicked = true;
}
...
</script>
Or removing the onclick event as suggested by others,
<script>
function klikaj(i) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
document.getElementById('thumb0).onclick = undefined;
}
...
</script>
Note that once: true is unfortunately not supported in IE and Edge. See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Event Handlers & Listeners
There are three ways* to register an event to an element. The following examples show how to register the click event to a link with the class .once** which calls the function test() when triggered.
Event Listener (recommended)
document.querySelector('.once').addEventListener('click', test);`
On-event Attribute (not recommended)
<a href='#/' class='once'onclick='test()'>Click</a>
On-event Property
document.querySelector('.once').onclick = test;`
*See DOM on-event handlers for details
** .once class is not relevant for #2
Issues
The OP (Original Post) has an event listener (see #1 above) registering a click event to the <body> tag and an on-event attribute (see #2 above) registering the click event to a <div>. Each one calls a function (aka callback function) named klikaj() which is redundant. Clicking the body (which is normally everywhere) isn't useful when you intend to have the user click a div. Should the user click anywhere but the div, klikaj() will be called. Should the user click the div, klikaj() will be called twice. I suggest that you remove both event handlers and replace them with this:
A.
document.getElementById('thumb0').addEventListener("click", klikaj);
Note that klikaj has no parenthesis () because the browser interprets () as to run the function now instead of when the user triggers the registered event (see #1 and #3 above). Should an event handler have additional statements and/or callback functions then an anonymous function should be wrapped around it and normal syntax applies:
B.
document.getElementById('thumb0').addEventListener("click", function(event) {
klikaj();
console.log('clicked');
});
A cleaner alternative is to add extra lines in the definition of the callback function instead and registering events like #A.
Solution
Simply add the following statement as the last line of klikaj():
this.style.pointerEvents = "none";
That will render the clicked tag unclickable. Applied to OP code it should be like this:
<div id="thumb0" class="thumbs">Thumb 0</div>
<script>
function klikaj(event) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
this.style.pointerEvents = "none";
}
document.getElementById('thumb0').addEventListener("click", klikaj);
</script>
Demo
The following demo has two links:
.default - a normal link registered to the click event which when
triggered calls test()
.once - a link registered to the click event which when triggered
calls test() and renders the link unclickable.
function test() {
console.log('test');
}
document.querySelector('.default').onclick = function(e) {
test();
}
document.querySelector('.once').onclick = function(e) {
test();
this.style.pointerEvents = 'none';
}
<a href='#/' class='default'>Default</a><br>
<a href='#/' class='once'>Once</a>
There is a problem with the way you are trying to attach your handler function.
The function klikaj(i) returns undefined so you are attaching undefined to the button. If you want to execute klikaj(i) when the button is clicked, put it inside a closure like this:
const button = document.querySelector('button')
const i = 10
function klikaj(i) {console.log('clicked once')}
button.addEventListener('click', () => { klikaj(i) }, {once: true})
<button>Hello world</button>
If the browser does not support the {once: true} you can simulate it using:
const button = document.querySelector('button')
const i = 10
function klikaj(i) {console.log("clicked once")}
function clickOnceHandler(event) {
klikaj(i)
event.currentTarget.removeEventListener('click', clickOnceHandler)
}
button.addEventListener('click', clickOnceHandler)
<button>Hello world</button>
Just use a flag variable and set it upon the first execution:
var handlerExecuted = false;
function clickHandler() {
if (!handlerExecuted) {
console.log("call gtag() here");
handlerExecuted = true;
} else {
console.log("not calling gtag() function");
}
}
document
.getElementById("thumb0")
.addEventListener("click", clickHandler);
<div id="thumb0" class="thumbs">My button</div>
An advance variation that uses closures and could be used on multiple buttons:
function clickHandlerFactory() {
var handlerExecuted = false;
return function() {
if (!handlerExecuted) {
console.log("call gtag() here");
handlerExecuted = true;
} else {
console.log("not calling gtag() function");
}
}
}
[...document.querySelectorAll(".thumbs")].forEach(function(el) {
el.addEventListener("click", clickHandlerFactory());
});
<div id="thumb0" class="thumbs">Button 1</div>
<div id="thumb1" class="thumbs">Button 2</div>
If you want the function to be called only when user clicks the button, you will have remove the click event listener from the body.
To fire your gtag function only once you can change the function definition of klikaj inside the function body itself. After the first call gtag will never be called.
The below code works fine.
<script>
function klikaj(i) {
gtag('event', 'first-4', {
'event_category' : 'cat-4',
'event_label' : 'site'
});
klikaj = function() {};
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">
My button
</div>
The site I am now the active developer on makes use of an externally loaded script. That contains a event listener on an given element in the DOM. The event is triggered with the following example
document.getElementById('my_id').onclick = function() { /*code*/ }
I have tried using the following examples to remove the listener to no avail.
document.getElementById('my_id').onclick = ''
document.getElementById('my_id').addEventListener('click', function(e){ /*code*/ })
document.getElementById('my_id').removeEventListener("click")
I have no control over this external code, but need to stop its behavior. My attempts fail currently I am trying to figure out why
Just assign an empty function, like this:
document.querySelector('#main').onclick = () => {}
And working version
document.querySelector('#main').onclick = () => console.log('clicked')
document.querySelector('#remove').onclick = () => document.querySelector('#main').onclick = () => {}
<button id="main">Click me</button>
<button id="remove">Remove the listener</button>
Assign null or empty function to onclick
const btn = document.querySelector("button");
btn.onclick = function() {
btn.onclick= null;
alert("removed");
}
<button>Click me</button>
This question was already answered:
How do you override inline onclick event?
Remove and replace another onclick function in a div through Pure Javascript?
document.querySelector('#main').onclick did not work for me, because onclick event is not defined for basic Element class which is querySelector result. Instead, you need to cast to HTMLButtonElement:
(document.querySelector('abx-back-button') as HTMLButtonElement).onclick = (event: MouseEvent) => {
this.router.navigate(['/segment-areas'], { state: { filterParams: this.filterQueryParams } });
};
I want to store the function reference in a variable and re use it by calling wherever required. Suppose I have a click bound function like this:
var clickEvent = $('#mode').click(function () {
alert("Hello");
});
And I want to reuse it like this:
//call somewhere
clickEvent();
But it is showing an error clickEvent is not a function, why ?
Keep the snippet inside a function , but even in that case the click event won't be triggered.
var x = function() {
$('#mode').click(function() {
alert("Hello");
});
// on call of this function click event will
$("#mode").trigger('click')
}
x()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mode"> Click</button>
With only javascript
var x = function() {
var el = document.getElementById('mode')
el.addEventListener('click', function() {
alert('clicked')
})
el.click();
}
x()
<button id="mode"> Click</button>
$('#mode').click(...) doesn't return a function, it returns the value of $('#mode') so that you can chain method, e.g. $('#mode').click(...).change(...).
If you want a name for the handler function, define it separately:
function clickEvent() {
alert("Hello");
}
and then use it in the event binding:
$("#mode").click(clickEvent);
or call it directly:
clickEvent();