document.getElementById("btn2").onclick = false;
I did this to stop getting on click event after the first one and when I want to set it back to normal
document.getElementById("btn2").onclick = True;
it does not take click events
You could always disable the button, like this:
document.getElementById("btn2").disabled = true;
This sets the disabled attribute to true, therefore stopping the onClick function from being called when the user clicks the button.
Declare a variable boolean and change using logical not operator (!: see in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT), example:
let toggle = true;
let button = document.querySelector('button');
let result = document.querySelector('span');
button.onclick = () => {
toggle = !toggle;
result.textContent = `Your switch to ${toggle}`;
}
<button>Click me</button>
<span></span>
You may not set onclick event as True instead try this way.
const setEvent = (enable) => {
if(enable){
document.getElementById("btn2").addEventListener('click', onClickEvent);
}
else{
document.getElementById("btn2").removeEventListener('click');
}
}
function onClickEvent(){
//Your actual event when clicking the button
}
//Now enable or disable the event as follows
setEvent(true); //Will attach the event
setEvent(false); //Will remove the event
Make sure you call setEvent(true) once only, because it can attach multiple events.
Related
I have some code that wants to be executed while the user resizing an element and scrolling the window at the same time tow events must occur at the same time to execute the function something like the following but I want to merge them to be like one custom event?
this.on("resize", function() {
$(window).scroll(function() {
figure.setHeight(_this.getHeight());
_this.setHeight(figure.getHeight());
});
});
Explanation : I have used a flag here, initially set to false. As it is given that both events will be happening, we can make a check in one function is the other is happening or not and execute the desired function.
First of all click the button. A console will be generated, that clicked. Now flag is set to true. But myFunction() is not eecuted, coz it will fire only when keydown will take place. In case key is pressed, flag won't be true, and hence myFunction() will not be executed. Now that you know that, button was clicked, so it has the focus. On pressing enter key, it will do perform click and keydown at same time. And myFunction() will get executed. When it gets executed, set flag to false. :)
var flag = false;
$(document).on("keydown", function() {
flag = true;
console.log("key pressed");
});
$('button').click(function() {
console.log("clicked");
if (flag) {
myFunction();
}
});
function myFunction() {
alert("Both at same time");
flag = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click me</button>
From my understanding the resize event is triggered first, and then if the user also scrolls your custom function should be called
let resizeTriggered = false
const myResizeFunc = (event) => {
resizeTriggered = true
}
const myScrollFunc = (event) => {
if (resizeTriggered) {
myCustomFunction()
}
}
const myCustomFunction = () => {
console.log('both are happening')
}
$('#textArea').mousedown(myResizeFunc)
$(window).scroll(myScrollFunc)
div.large {
height:1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="textArea"></textarea>
<div class="large">
</div>
I have an input field with a JS focusout event. Under my input field, I have an autocomplete popup with suggestions. But when I click on a suggestion, it’s playing the focusout before the event listener on the click of the autocomplete! Any clues on how I can I fix this conflict?
Picture of the input and its autocompletion:
The click event:
resultsFrom.addEventListener('click', (event) => {
let e;
e = event.target.parentNode;
inputFrom.value = e.getAttribute('data-display');
});
The focusout event:
inputFrom.addEventListener('focusout', () => {
const list = document.querySelector('#results-from');
let first = list.firstChild;
inputFrom.value = first.getAttribute('data-display');
resultsFrom.innerHTML = '';
});
The focusout event has a property on the event object of relatedTarget - this is the element that's going to gain the focus, in this case, it will be the element you're clicking on.
You need to check if that element is within your results, and not clear them out if that's the case. Something like this:
inputFrom.addEventListener('focusout', (e) => {
const list = document.querySelector('#results-from');
if (!list.contains(e.relatedTarget)) {
//the target is not in the list, continue as before
//otherwise allow the click to function by not clearing out resultsFrom
let first = list.firstChild;
inputFrom.value = first.getAttribute('data-display');
resultsFrom.innerHTML = '';
}
});
First I displayed the div on screen and now I want to use the the button to create that same div(or any other action) after user input.
document.getElementById("add").addEventListener("click", function() {
document.getElementById("welcome").style.display = "block";
}
How do i make the button be able to work again after the first thing it did?
It isn't customary to reuse a UI element in different ways as it tends to confuse the end user. But if you must...
document.getElementById("add").addEventListener("click", showWelcome);
function showWelcome() {
document.getElementById("welcome").style.display = "block";
document.getElementById("add").removeEventListener("click", showWelcome);
reassignButton();
}
function resassignButton(){
// some decision logic for next button function
document.getElementById("add").addEventListener("click", doNextThing);
}
function doNextThing(){
// removes eventlistener on add button. does whatever
}
You can use removeEventListener to remove the handler and then set a new one.
var ele = document.getElementById('btn');
ele.addEventListener("click", function click1(){
//Do stuff for the first click
this.innerHTML = "Click Me Again";
alert("Hello");
//Remove the event hendler
this.removeEventListener("click", click1, true);
//Attach handler for rest of clicks
ele.addEventListener("click", function click2(){
alert("You cicked again!");
}, true);
}, true);
<button id=btn>Click Me</button>
Although it's probably more practical to re-use a single event listener, as assigning and re-assigning event listeners can sometimes lead to memory leaks..
(()=>{
var ele = document.getElementById('btn');
var clicks = 0;
ele.addEventListener("click", function(){
if(clicks){
alert("Thanks for clicking again");
}else{
alert("Hello");
this.innerHTML = "Click again";
}
clicks++;
}, true);
})();
<button id=btn>Click Me</button>
You can make several methods and use these with the onclick attribute of button.
Also I advise you to use jQuery. It's easy and faster than JS.
I'm having a problem with the button in my HTML5 application.
When I press the button a Video player runs and plays the video that is stored locally. My issue now is that when I hold the button and release it, it doesn't fire the video player. I'm using an onclick event on my button.
I want to achieve that if I press and hold the button and then release it, it fires the same event as the one I use with the onclick.
Use onmouseup event.
var button = //your button
button.onmouseup = function() {
//your logic
}
Actually onmousedown event instead of onClick will do the trick.
Again the same syntax:
Javascript
<button onmousedown ="clickFunction()">Click me!</button>
function clickFunction(){
//code goes here
}
jQuery
function clickFunction(){
$(button).onmousedown(function(){
//code goes here
});
};
you should use a boolean to save the current state.
var mouse_is_down = false;
var current_i = 0; // current_i is used to handle double click (to not act like a hold)
var button = document.querySelector("#myButton");
button.onmousedown = function(){
mouse_is_down = true;
// Do thing here for a mousedown event
setTimeout(
(function(index){
return function(){
if(mouse_is_down && current_i === index){
//do thing when hold
}
};
})(++current_i), 500); // time you want to hold before fire action in milliseconds
};
button.onmouseup = function(){
mouse_is_down = false;
current_i++;
// Do thing here for a mouseup event
};
Fiddle : link
$("#prevPage").live("click",function(e) {
.................
});
For example, when the user have already clicked on the prevPage, the statement inside it is running, if the user click on it instantly , it will trigger again. However, I would like the click event trigger only after all the statement inside it have finish execution, How to achieve that?
How about this or something similar:
<script type="text/javascript">
// disable command while function is being executed.
var sample = {
isExecuting : 0,
doWork : function (e) {
if (sample.isExecuting === 1) return;
sample.isExecuting = 1;
// do work -- whatever you please
sample.isExecuting = 0; // say: I'm done!
}
};
// live or bind
$("#prevPage").bind("click",function(e) {
sample.doWork(e);
});
</script>
simple 'shield' to block a multiple-call scenario.
Then set a flag on the element to check if it's clickable or not.
$("#prevPage").on("click",function(e) {
e.preventDefault();
//get the clickable attribute
//if it's not existent, its undefined hence "false"
var unclickable = this.unclickable;
//if it's not unclickable (it's clickable)
if(!unclickable){
//make the flag unclickable
this.unclickable = true;
//do stuff
//reset it back the way it was after operations
this.unclickable = false;
}
});
Set a variable that your event triggered
var prevPageEventTriggered = false ;
and set it to ture when event triggered
prevPageEventTriggered = true;
and then add condition for this in click event handler function
$("#prevPage").live("click",function(e) {
if ( prevPageEventTriggered ) {
return false;
}
// your code goes here
// ....
});
if it have finish execution, you can set it to false . hope this will helps
use the unbind function of jquery
$("#prevPage").unbind("click");
after your task finished
$("#prevPage").bind("click",function(){....your code here....});
unbind() will do the work for you.
An alternate could be like using detach(). When your process is executing detach the button and when your process finsihes executing, use reattach() to get the button back.
What I will suggest is use unbind().