So I'm working on a school coding project and I'm having trouble disabling a function when a particular button is pressed. I assumed a return command would be the best way to go but my code doesn't seem to be doing the job. Here's an example of the code I tried:
var x = false;
onEvent("button","click",function(){
`` x = true;
newScreen();
});
if(x == true){
return false;
}else{
return true;
}
}
This is taken from the end of a function. Does the if statement have to be directly connected to the function (placed right at the top)? If so, how would I go about coding the function where if it's true, run the code but if it's false, don't (if that makes sense)?
var x = false;
onEvent("button","click",function(e){
if(x === true) {
e.target.disabled = true;
e.preventDefault();
e.stopPropagation();
return;
}
x = true;
newScreen();
});
Related
I am currently trying to synchronize two checkboxes on a page.
I need the checkboxes to be synchronized - to this end, I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event. Otherwise, that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false) {
document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();
}
//This is where it listens for the click and attempts to synchronize the buttons.
$(document.getElementById(srcFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(destFFRb).click();
}
});
$(document.getElementById(destFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(srcFFRb).click();
}
});
I'm at a bit of a loss...any help would be greatly appreciated.
Figured it out - I was comparing class lists without singling out what I wanted to actually match.
My solution:
$(document.getElementById(srcFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(destFFRb).click();;
}});
$(document.getElementById(destFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(srcFFRb).click();;
}});
When someone clicks a button I want my function to return false and the keydown function will be disabled.
Then, if I click this same button a second time, it will return true and the keydown function will be enabled.
I did like this but it only returns false and keydown function disabled. I also need to enable this keydown function by clicking this button.
How can I do this?
var controlsEnabled = true;
$(".keyboard-btn").on('click', function() {
controlsEnabled = false;
});
$(document).keydown(function(e) {
if (controlsEnabled) {
if (e.keyCode == 38) {
verticalSlideDown();
console.log("pressed key for Down : " + e.keyCode);
}
if (e.keyCode == 40) {
verticalSlideUp();
console.log("pressed key for Up: " + e.keyCode);
}
if (e.keyCode === 13) {
var div = $(".scroll-inner-container");
console.log("pressed key for stop : " + e.keyCode);
div.stop();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="keyboard-btn">click here</button>
Your click even only ever sets controlEnabled to false. You need a way to toggle.
The quickest option is to write this
$(".keyboard-btn").on('click', function() {
controlsEnabled = !controlsEnabled // will toggle false -> true or true -> false;
});
You could also use if statements to achieve the same thing.. like this
$(".keyboard-btn").on('click', function()
{
if(controlsEnabled)
{
controlsEnabled = false;
}
else
{
controlsEnabled = true;
}
});
This is more long-winded, but perfectly valid, and you could argue it's easier to read. You could also use a ternary operator like this
controlsEnabled = (controlsEnabled)? false : true;
But that wouldn't really give any advantage, being neither easier to read, or more elegant. But it's worth knowing the different ways to conditionally set a value based on itself. You never know when it might come in handy.
How about this?
$(".keyboard-btn").on('click', function() {
controlsEnabled = !controlsEnabled;
});
This may helpful
$(".keyboard-btn").on('click', function () {
controlsEnabled= controlsEnabled? false :true ; // controlsEnabled = !controlsEnabled
});
Just replace first 4 lines with this code :
var controlsEnabled = true;
$(".keyboard-btn").on('click', function() {
controlsEnabled = !controlsEnabled;
});
Firstly, your function doesn't return anything at the moment - you need to add the return keyword.
Secondly, your code isn't performing a boolean switch, it is merely assigning a boolean value. As true=1 and false=0, you can write:
controlsEnabled^=1;
which uses the XOR operator to switch from true to false and back again.
I am working in asp.net and have a table with a button which renders a modal popup. If I click this button more than once it pops up multiple modals, which I do not want. I haven't done very much JavaScript in my career but have the following code. I think that the conditional logic I am using may not be necessary, perhaps there are some JavaScript functions that would better serve this purpose. This is the code, the .singleAction refers to the button.
$(document).ready(function () {
var isClicked = false;
$('.singleAction').click(function (e) {
e.preventDefault();
if (isClicked = true) {
return;
}
else {
isClicked = true;
event.stopPropagation();
}
}).done(function(){
isClicked = false;
});
$(document).ready(function () {
var isModalOpen = false;
$('.singleAction').click(function (e) {
e.preventDefault();
if (isModalOpen) {
return;
}
else {
isModalOpen = true;
event.stopPropagation();
}
});
// Some logic to set isModalOpen to false once the
// modal is closed...
// ...
});
Biggest thing wrong with your code was the if statement. You were assigning true rather than checking for equality. And in JavaScript, when checking the value of booleans just use the variable name. Check out Truthy/Falsey values in JavaScript. http://adripofjavascript.com/blog/drips/truthy-and-falsy-values-in-javascript.html
Here is the code that works as-is, a classic onBeforeUnLoad event, in the <script type="text/jscript"> tag of my ASP page :
window.onbeforeunload = function (e) {
a = 1;
e = e || window.event;
e.preventDefault = true;
e.cancelBubble = true;
e.returnValue = "do you wish to save?";
}
Now, two issues i'm experiencing when wanting to do something more complex :
I want this to appear only once at all cost :
var a = 0;
window.onbeforeunload = function (e) {
if (a == 0) {
a = 1;
e = e || window.event;
e.preventDefault = true;
e.cancelBubble = true;
e.returnValue = "Wish to save?";
}
}
//Does not work...
I want it to be able to run this other function that works when not combined with the first :
comfirmExit = function(){
if (confirm("Wish to save?") == true) {
document.getElementById('<%= btnEnregistrer.ClientID %>').click();
}
}
// works, but not when combine to the first function
I tried to put this all together... I want the unload event to make my confirm box function run :
window.onbeforeunload = function (e) {
if (a == 0) {
a = 1;
comfirmExit = function(){
if (confirm("Wish to save?") == true) {
document.getElementById('<%= btnEnregistrer.ClientID %>').click();
}
}
}
And now I realize I'm far from being an expert of javascript...
The beforeunload event won't run any obtrusive Javascript for the user (ie alert, confirm etc).
But there is an workaround, the steps should be something like:
Create a boolean flag to check if the user has canceled the exiting of your page (default false).
Create the beforeunload event handler, and check if the game is not
saved.
If it was already saved, then, you do nothing, and let the user go
But if it was not, then you change that boolean flag to true.
You keep an interval dirty-checking if that variable is true, and at anytime it is, you save the game for the user, and then set this variable to false again.
So, doing that, you'll ensure the user always see a message if they're leaving without saving, and if they cancel the exiting, the game will be automatically saved, making the next try pretty smooth.
Take a look at the example below. To test it, open your console, click on Run. Then, try to click on Run again, and you'll see an exiting message. If you confirm it, your console won't show anything. But if you cancel it, then, you'll be kept in the page, then you try to click Run again, and you'll see that no message will appear, but the console will log true.
(function() {
var game = { saved: false };
var canceled = false;
setInterval(function() {
if (canceled) {
game.saved = true;
canceled = false;
}
}, 100);
window.onbeforeunload = function() {
if (!game.saved) {
canceled = true;
return 'Are you sure?';
}
else {
console.log(game.saved);
}
}
})();
I have many forms generated dynamically via PHP. I'm trying to verify that all the fields on the one form that's going to be submitted are filled. I'm just starting to JQuery, so I'm sorry if the answer is stupidly easy.
I tried this:
$('.myform').submit(function(){
var flag = true;
$('.myform input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
But when in the second form, it goes and checks the first one (which should be empty because you're not filling that one...)
Thanks in advance!
$('.myform').submit(function(){
var flag = true;
// use $(this) below which is the form has submit event fired.
$(this).find('input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
Or you could simplify your code by:
$('.myform').submit(function() {
return $(this).find('input').filter(function() {
return $.trim($(this).val()) !== '';
}).length == 0;
});