How to toggle the class - javascript

Hi folks i am having problem to execute this code in the browser onclick event on an icon when i click it it works fine when i click to close the list it close and open again like on the mouse down it close and then releasing the button it open again here is the function code where i am doing wrong
toggleExpand(e, focus = true) {
this.moving = true;
if (e) {
e.preventDefault();
e.stopPropagation();
}
this.expanded = !this.expanded;
toggleClass(this.config.open, this.el);
ariaToggle('opened', this.current);
if (!this.selected) {
toggleClass(this.config.icons.expanded, this.icon);
}
if (this.expanded) {
this.select();
console.log('Clicked1');
if (this.params.scrollToView) {
this.el.parentElement.previousElementSibling.scrollIntoView();
}
} else {
this.current.setAttribute('tabindex', 0);
console.log('Clicked2');
if (focus) {
this.current.focus();
}
}
setTimeout(() => {
this.moving = false;
}, 100);
}
i put the console to check it on 1st click i get clicked1 on on 2nd i get clicked2 and instantly clicked1 again how to stop it here without css.

Related

How do i toggle something on click using an event listener if condition is met?

I want to toggle a navbar on click using a button and if the navbar is already active I want to disable it when the user clicks anywhere. The event listeners are all connected and the toggling code works normally but implementing the "click anywhere on the screen to turn off" feature isn't working.
Edit: I can now toggle by clicking anywhere but I can't toggle using the button I can only turn it on and not off.
const button = document.querySelector('button.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation();
if (!menuActive) {
menu.classList.toggle('hidden');
menuActive = true;
}
});
window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});
The problem is that when you click on the button, you are also clicking on the window at the same time. You should use stopProgopation().
Here is a solution. When the button is clicked, the menu gets shown. If the user then clicks on the screen somewhere else other than the button, the menu will disappear.
<div id="menu" class="mobile-menu hidden">This is the menu</div>
<button class="mobile-menu-button">Button</button>
<script>
const button = document.querySelector('button.mobile-menu-button');
const menu = document.getElementById('menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation();
if (!menuActive) {
menu.classList.toggle('hidden');
menuActive = true;
}
});
window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});
</script>
<style>
.mobile-menu {
display: block;
}
.hidden {
display: none;
}
</style>
I found I didn't need a condition for the button itself, only the window. Thanks to everyone for helping.
const button = document.querySelector('button.mobile-menu-button');
const menu = document.querySelector('.mobile-menu');
let menuActive = false;
button.addEventListener('click', (e) => {
e.stopPropagation()
menu.classList.toggle('hidden');
menuActive = true;
});
window.addEventListener('click', () => {
if (menuActive) {
menu.classList.toggle('hidden');
menuActive = false;
}
});

Call a onkeyup function when click on other button jQuery

I have function which has keyup event on input field which is working fine.
I want to trigger this function also upon click on other button.
Here is my function
function validateChild(el) {
var validated = {};
console.log('Remove button clicked');
var dateOfBirthField = $(el).find('.date_of_birth');
$(dateOfBirthField).on("keyup", function () {
var dateOfBirthValue = $(el).find('.date_of_birth').val();
console.log('Check DoB');
if(validateDateOfBirth(dateOfBirthValue, dateOfBirthField)){
console.log('True');
validated.dateOfBirth = true;
} else {
validated.dateOfBirth = false;
}
validateButton(validated);
});
}
I'm calling this function on document load
function validateForms() {
$(document).find(".child-form").each(function () {
validateChild(this);
});
}
Here i have click event
.on('click', '.removeButton', function (event) {
validateForms();
});
When i click on this remove button it trigger but stop working after this
console.log('Remove button clicked');
How can i trigger keyup event also on this remove button, or there is better way to do this in javascript.
Can anyone help me with this?
Thanks
I have reviewed your three code blocks. Please try following three code blocks respectively.
Your function
function validateChild(dateOfBirthField) {
var validated = {};
var dateOfBirthValue = $(dateOfBirthField).val();
console.log('Check DoB');
if(validateDateOfBirth(dateOfBirthValue, dateOfBirthField)){
console.log('True');
validated.dateOfBirth = true;
} else {
validated.dateOfBirth = false;
}
validateButton(validated);
}
Call this function on document load
function validateForms() {
$('.child-form').on('keyup', '.date_of_birth', function() {
validateChild(this);
});
}
Click event
.on('click', '.removeButton', function() {
console.log('Remove button clicked');
$('.child-form .date_of_birth').each(function() {
validateChild(this);
});
});

How prevent click during mousemove

I have circle menu with rotation. And after simple click i want to fire click event, but during rotation - mousemove i want ignore click. For now i have -
<g id="bottomMenuRotate" onMouseDown={this.selectElement.bind(this)}>
Then my select function looks -
selectElement(e){
let groupRotate = document.getElementById('bottomMenuRotate');
groupRotate.onmousemove = function(e) {....}
groupRotate.onmouseup = function(e){
groupRotate.onmousemove = null;
}
}
So how i cant prevent click? I tried something like
groupRotate.onmouseup = function(e){
e.stopPropagation();
groupRotate.onmousemove = null;
};
or
groupRotate.onmouseclick = function(e){
e.stopPropagation();
}
but this prevents every click. Any tips how i can do it?
So i finally found simply solution
selectElement(e){
let move = false;
groupRotate.onmousemove = function(e) {
move = true;
}
groupRotate.onclick = function(e){
move ? e.preventDefault() : false;
}
}
This prevent click only when move is set to true.
Set a state in your onMouseMove handler that prevents the click events from running:
groupRotate.onmousemove = (e) => {
this.setState({ mouseMoving: true });
}
groupRotate.onmouseup = (e) => {
this.setState({ mouseMoving: false });
}
Somewhere else:
groupRotate.onmouseclick = (e) => {
if (!this.state.mouseMoving) {
...
};
}
Note the arrow functions to make this available within the functions.

How to de-select a button using JavaScript

I have a button that a user is supposed to click to upload files:
window.URL = window.URL || window.webkitURL;
var button = document.getElementById("button"),
fileElem = document.getElementById("fileElem"),
fileList = document.getElementById("fileList");
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault();
}, false);
function handleFiles(files) {
if (!files.length) {
fileList.innerHTML = "<p>No files selected!</p>";
} else {
fileList.innerHTML = "";
for (var i = 0; i < files.length; i++) {
var videoFile = document.createElement("video");
videoFile.setAttribute("id", "recording");
videoFile.src = window.URL.createObjectURL(files[i]);
videoFile.height = 240;
videoFile.width = 320;
videoFile.setAttribute("controls", true);
videoFile.onload = function() {
window.URL.revokeObjectURL(this.src);
}
fileList.appendChild(videoFile);
}
}
}
Then the user is supposed to use the space bar to pause/play a video. My problem is after the user clicks the button, the button stays clicked so when he or she pushes the space bar, the button is liked again. To solve this problem, the user would have to click somewhere else on the screen (except for the button) and then the space bar will work to pause/play the video. But I do not want the user to click somewhere else. So I tried to click a span element using JS but it did not work:
document.getElementById("spanElement").click();
This click is supposed to simulate the click the user would on the screen, but it doesn't work because when the spacebar is pressed, the button is clicked.
Any suggestions to solve this?
Thank you
Using HTMLElement.blur() should have the desired effect.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault();
e.target.blur();
}, false);
This will remove focus from the element once clicked.
That happen because after the click on the button it still focused, so to solve that behavior you could use .blur() in the end of click event.
The blur() method is used to removes keyboard focus from the current element.
button.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.target.blur(); //Remove focus after click
e.preventDefault();
}, false);
Hope this helps.
You could also add css to the button - pointer events
to disable button: $("#buttonId").css("pointer-events", "none");
to reactivate button: $("#buttonId").css("pointer-events", "auto");

A confirmation popup in JS

I am looking into making a confirmation menu in JavaScript to where it will run a set of code depending if you select yes or no.
Now I want it to happen on the window.onbeforeunload event but only when the individual presses "yes" do I want the rest of the code to work. If they press "no" I want the window.onbeforeunload to be cancelled outright. I am wondering if it is at all possible and how. Here is what I have so far. The reason why I want this is because when I run the script the popup shows up on return but before someone would get to choose to stay or leave. The click(); feature starts up erasing the information. I want the .click(); to start up after someone presses "yes" on the return and only if they press "yes".
var validNavigation = false;
function wireUpEvents() {
var dont_confirm_leave = 0;
var leave_message = document.getElementById("kioskform:broswerCloseSubmit");
var leave_safari = document.getElementById("kioskform:broswerCloseSafari");
function goodbye(e) {
if (!validNavigation) {
function disp_confirm()
{
var leaveMessage=confirm("Are you sure you want to leave")
if (leaveMessage==true)
{ if (dont_confirm_leave!==1) {
if(!e) e = window.event;
//for IE
e.cancelBubble = true;
e.returnValue = leave_message.click();
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
//return works for Chrome and Safari
leave_safari.click();
return '';
//add the code to delete the kiosk information here.
// this is what is to be done.
}
}
else
{
Alert("Returning to the page.")
}
}
window.onbeforeunload=goodbye;
// Attach the event keypress to exclude the F5 refresh
jQuery('document').bind('keypress', function(e) {
if (e.keyCode == 116){
validNavigation = true;
}
});
// Attach the event click for all links in the page
jQuery("a").bind("click", function() {
validNavigation = true;
});
// Attach the event submit for all forms in the page
jQuery("form").bind("submit", function() {
validNavigation = true;
});
// Attach the event click for all inputs in the page
jQuery("input[type=submit]").bind("click", function() {
validNavigation = true;
});
}
// Wire up the events as soon as the DOM tree is ready
jQuery(document).ready(function() {
wireUpEvents();
});
Why not just use window.confirm?

Categories

Resources