// openMNav.isDropDown = false;
var openMNav = function () {
if (!this.isDropDown) {
this.isDropDown = true;
console.log(1);
} else {
this.isDropDown = false;
console.log(0);
}
My question is how to do something like this: var openMNav.isDropDown = false;.
I want to set openMNav -> isDropDown outside the function to false
You mean to set on the function itself, you should just use openMNav in the function not this.
function openMNav () {
if (!openMNav.isDropDown) {
console.log('do open');
openMNav.isDropDown = true;
}
else {
console.log('already opened');
openMNav.isDropDown = false;
}
}
openMNav();
openMNav();
Related
How to quit from function while being inside the loop?
Return false does not work.
var children;
var target;
elementLoaded('.inputOne', function (element) {
children = element;
target = $('.inputTwo');
$(children).each(function (x, y) {
child = $(y);
if (child.is(":not(:checked)"))
return false;
})
target.prop("checked", true);
});
Only for clarity used function.
function elementLoaded(el, cb) {
element = $(el);
if (element.length) {
cb(element);
} else {
setTimeout(function () {
elementLoaded(el, cb)
}, 500);
}
};
you provided:
return false;
but you only need to:
return;
this question was already answered: Early exit from function?
I am trying to get a better understanding on javacsript. And I am not sure why this code is not working. I am trying to create functions that will call another function. And return the results of the called function.
When I call the below, I get fully logged in and presented with the screen I desire. But jsDidLogin Always returns undefined. Is there a better way to implement my methods?
var jsDidLogin = beginLogin()
console.log(jsDidLogin)
function waitUntilElementFound(element, time, callFunction) //Wait for the element to be found on the page
{
if (document.querySelector(element) != null) {
return callFunction();
}
else {
if (!checkForFailedLogin()) {
setTimeout(function () {
waitUntilElementFound(element, time, callFunction);
}, time);
}
else {
return false;
}
}
}
function checkForFailedLogin() {
if (document.querySelector("div[class='modal-body ng-scope'] h1") != null) {
if(document.querySelector("div[class='modal-body ng-scope'] h1").innerHTML == "Login Error")
{
return true;
}
}
else {
return false;
}
}
function initialTabSelect() //Load the bank page once login is completed
{
document.querySelectorAll("li[class='Tab'] a")[0].click();
return "Fully Logged In";
}
function initialDoNotAsk() {
document.querySelectorAll("a[ng-click='modalCancel()']")[0].click();
return waitUntilElementFound("li[class='Tab'] a", 1000, initialTabSelect);
}
function initialLogin() {
var accountName = document.getElementById("username");
var accountPassword = document.getElementById("password");
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
accountName.value = "USERNAME";
accountPassword.value = "PASSWORD";
accountName.dispatchEvent(evt);
accountPassword.dispatchEvent(evt);
document.querySelectorAll("form[name='loginForm'] button.icon-login")[0].click();
return waitUntilElementFound("a[ng-click='modalCancel()']", 2000, initialDoNotAsk);
}
function beginLogin() {
return waitUntilElementFound("form[name='loginForm'] button.icon-login", 1000, initialLogin);
}
Changing to this alerts me when Fully Logged in, but if I change it to return status. I still get no returns.
My head is starting to hurt :(
function waitUntilElementFound(element, time, callFunction, callBack) //Wait for the element to be found on the page
{
if (document.querySelector(element) != null) {
callBack(callFunction());
}
else {
if (!checkForFailedLogin()) {
setTimeout(function () {
callBack(waitUntilElementFound(element, time, callFunction, function(status){alert(status);}));
}, time);
}
else {
return false;
}
}
}
function checkForFailedLogin() {
if (document.querySelector("div[class='modal-body ng-scope'] h1") != null) {
if(document.querySelector("div[class='modal-body ng-scope'] h1").innerHTML == "Login Error")
{
return true;
}
}
else {
return false;
}
}
function initialTabSelect() //Load the bank page once login is completed
{
document.querySelectorAll("li[class='Tab'] a")[0].click();
return "Fully Logged In";
}
function initialDoNotAsk() {
document.querySelectorAll("a[ng-click='modalCancel()']")[0].click();
return waitUntilElementFound("li[class='Tab'] a", 1000, initialTabSelect, function(status){alert(status)};);
}
function initialLogin() {
var accountName = document.getElementById("username");
var accountPassword = document.getElementById("password");
var evt = document.createEvent("Events");
evt.initEvent("change", true, true);
accountName.value = "USERNAME";
accountPassword.value = "PASSWORD";
accountName.dispatchEvent(evt);
accountPassword.dispatchEvent(evt);
document.querySelectorAll("form[name='loginForm'] button.icon-login")[0].click();
return waitUntilElementFound("a[ng-click='modalCancel()']", 2000, initialDoNotAsk, function(status){alert(status)};);
}
function beginLogin() {
return waitUntilElementFound("form[name='loginForm'] button.icon-login", 1000, initialLogin, function(status){alert(status)};);
}
How do i make sure function createOverzicht only is excecuted after functions
checkNotEmpty and checkNumber are done, now if i click on the button function createOverzicht its called, but thats not supposed to happen, createOverzicht is only supposed to be called after the first two functions or done.
In this case i have a form and the first two functions are to validate the input, so thats why i dont want createOverzicht o excecute when there is nothing filled in
so to simplify the concept this is what i mean:
function createOverzicht() {
if (checkNotEmpty && checkNumber) {
alert('hi');
};
else {
//do nothing
};
}
function checkNotEmpty(field, span) {
if (field.value.length > 1 && isNaN(field.value)) {
document.getElementById(span).className = 'goed';
document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
} else {
document.getElementById(span).className = 'nietgoed';
document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
};
};
function checkNumber(field, span) {
if (field.value.length == 10 && !isNaN(field.value)) {
document.getElementById(span).className = 'goed';
document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
} else {
document.getElementById(span).className = 'nietgoed';
document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
};
};
function createOverzicht() {
alert('hi');
}
window.onload = function() {
document.getElementById('naam').oninput = function() {
checkNotEmpty(this, 'meldingNaam');
};
document.getElementById('achternaam').oninput = function() {
checkNotEmpty(this, 'meldingAchternaam');
};
document.getElementById('telefoonnummer').oninput = function() {
checkNumber(this, 'meldingTel');
};
document.getElementById('overzicht').onclick = function() {
createOverzicht()
};
};
As far as I can see you have two options:
1) store the status(valid or invalid) of each input
This could be hard to maintain!!
2) Inside "createOverzicht" call a function that check if everything is Ok
This alternative will imply make some changes in the functions that validate, you will need that they return true if the field is valid or by the contrary false; also add some code at the beginning of "createOverzicht".
The implementation will look like:
function createOverzicht() {
checkNotEmpty(document.getElementById('naam'), 'meldingNaam');
checkNotEmpty(document.getElementById('achternaam'),'meldingAchternaam');
checkNumber(document.getElementById('telefoonnummer'), 'meldingTel');
alert('hi');
}
function checkNotEmpty(field, span) {
if (field.value.length > 1 && isNaN(field.value)) {
document.getElementById(span).className = 'goed';
document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
return true;
} else {
document.getElementById(span).className = 'nietgoed';
document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
return false;
};
};
function checkNumber(field, span) {
if (field.value.length == 10 && !isNaN(field.value)) {
document.getElementById(span).className = 'goed';
document.getElementById(span).innerHTML = '<img src=\'../img/ok.png\'>';
return true;
} else {
document.getElementById(span).className = 'nietgoed';
document.getElementById(span).innerHTML = '<img src=\'../img/notok.png\'>';
return false;
};
};
May be use a javascript library like jQuery for this, the jQuery Validator plugging will help you a loot.
You need to move the call to createOverzicht() like this:
function myFunction() {
if (checkNotEmpty && checkNumber) {
createOverzicht();
};
else {
//do nothing
};
}
Also the checkNotEmpty and checkNumber functions need to return a Boolean value.
Happy Holidays! How do i get this function running? I can see the console.log running on the mouse wheel, however the function set to run once does not run. On the start i have also made sure that the body contains both the required classes.
var $body = $('body');
//using index
if(index == 2){
$body.css({
overflow: 'hidden'
});
if($body.hasClass('fp-viewing-secondPage')) {
$('html').on('mousewheel', function (e) {
console.log('fucks');
var delta = e.originalEvent.wheelDelta;
if($body.hasClass('setAn1')){
var something = (function() {
var secret = false;
return function () {
if(!secret){
console.log('call me once please an1');
secret = true;
}
};
});
something();
}
if($body.hasClass('setAn2')){
var something2 = (function() {
var secret = false;
return function () {
if(!secret){
console.log('call me once please an2');
secret = true;
}
};
});
something2();
}
});
}
}
var something = (function() {
var secret = false;
return function () {
if(!secret) {
console.log('call me once please an1');
secret = true;
}
};
})();
You have the above block which is an IIFE. I believe what it's doing is assigning the below function to the something variable.
function () {
if(!secret) {
console.log('call me once please an1');
secret = true;
}
You'd have to then call the something() here.
secret = true;
}
};
})();
something();
}
I ported the structure of your program over into jfiddle. Your primary problem is that you're modifying a value who was defined inside of the scope created by the definition of the function. This value only lasts as long as that function is currently executing, once you leave the function the value leaves scope. What you need to do is define the variable outside the scope of the function so that you won't lose the state you're trying to keep between clicks.
Here's a minimal example. You'll see the secret gets set once you go through the loop, and then prevents the function's if() condition from being evaluated again.
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
var secret = false;
$('img').on('click', function(e) {
console.log('what is my secret outside?', secret);
if (!secret) {
console.log('what is my secret inside?', secret);
secret = true;
}
});
https://jsfiddle.net/wa819y2j/9/
var something = (function() {
var secret = false;
return function () {
if(!secret){
console.log('call me once please an1');
secret = true;
}
};
});
var something2 = (function() {
var secret = false;
return function () {
if(!secret){
console.log('call me once please an2');
secret = true;
}
};
});
var $body = $('body');
//using index
if(index == 2){
$body.css({
overflow: 'hidden'
});
if($body.hasClass('fp-viewing-secondPage')) {
$('html').on('mousewheel', function (e) {
console.log('fucks');
var delta = e.originalEvent.wheelDelta;
if($body.hasClass('setAn1')){
something();
}
if($body.hasClass('setAn2')){
something2();
}
});
}
}
Or else:
function runOnce(fun) {
var secret = false;
return function () {
if(!secret){
fun();
secret = true;
}
};
}
var something = runOnce(function() {
console.log('call me once please an1');
});
var something2 = runOnce(function() {
console.log('call me once please an2');
});
I want after click on button(Click Me), validation check just for field 2-1 and field 2-2 no for all files that has class .required (... .closest('form')...), how is it in my code?
DEMO: (in here when that you click on button it work for all field that have class .required but i want just check field into form closest('form')): http://jsfiddle.net/ZsPyy/2/
function required_valid() {
var result = true;
$('.required').each(function () {
if (!$(this).val()) {
//var cssObj=;
$(this).css("background", "#ffc4c4");
result = false;
}
$(this).keyup(function () {
$(this).css("background", "#FFFFEC");
})
});
return result;
}
$('button').live('click', function (e) {
e.preventDefault();
var passed = true;
//passed = required_selectbox() && passed;
passed = required_valid() && passed;
if (!passed) {
return false;
}
});
Try this code: http://jsfiddle.net/ZsPyy/4/
I have passed the button to the required_valid function. So we can get the btn's parent form.
function required_valid(btn) {
var result = true;
$(btn).closest("form").find('.required').each(function () {
if (!$(this).val()) {
//var cssObj=;
$(this).css("background", "#ffc4c4");
result = false;
}
$(this).keyup(function () {
$(this).css("background", "#FFFFEC");
})
});
return result;
}
$('button').live('click', function(e) {
e.preventDefault();
var passed = true;
//passed = required_selectbox() && passed;
passed = required_valid(this) && passed;
if (!passed) {
return false;
}
});
function required_valid(sbtn) {
var result = true;
$(sbtn).closest("form").children('.required').each(function () {
if (!$(this).val()) {
//var cssObj=;
$(this).css("background", "#ffc4c4");
result = false;
}
$(this).keyup(function () {
$(this).css("background", "#FFFFEC");
})
});
return result;
}
$('button').live('click', function(e) {
e.preventDefault();
var passed = true;
//passed = required_selectbox() && passed;
passed = required_valid(this) && passed;
if (!passed) {
return false;
}
});