Develop Reference

How to merge two javascript function with third function with condition?

I am beginer in js, and i have problem with merge two fucntions. I want to make third function with condition, when checkbox is marked and reCAPTCHA is marked, only then button is enable. By default, i set the button to disabled.
Single functions as below is working:
function clauseValid(elem) {
document.getElementById("sendBtn").disabled = false;
return true;
};
function captchaValid () {
document.getElementById("sendBtn").disabled = false;
return true;
};
<input type="checkbox" name="chkbx" id='#ID#' value="#seq_claim_id#" onClick="clauseVlid(this)">
<div class="g-recaptcha" data-sitekey="*****..." id="ckecCaptcha" type="checkbox" data-callback="captchaValid"></div>
I tried make someone like this but it doesn't work:
function clauseValid(elem) {
return true};
function captchaValid() {
return true};
function CheckTest() {
if (clauseValid(elem) && captchaValid()) {
document.getElementById("sendBtn").disabled = false;
}
}

Use variables for keeping track of the current status of each condition:
let isClauseValid, isCaptchaValid;
function clauseValid(elem) {
isClauseValid = elem.checked;
setButton();
}
function captchaValid() {
isCaptchaValid = true;
setButton();
}
function setButton() {
document.getElementById("sendBtn").disabled = !isClauseValid || !isCaptchaValid;
}
NB: make sure to correct the spelling mistake in your HTML onclick attribute.

Refactor same functions with different parent selector jQuery

I am using two functions that do the same thing but have different parent selectors. Unsure how to combine them into one function?
https://codepen.io/Kerrys7777/pen/gxxLdx
(function($) {
"use strict";
/*---SELECTED ITEM---*/
$(".entity-selectable").click(function() {
if(!$(this).hasClass('selected-item')) {
$('.entity-selectable').removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $(".periodicity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
});
/*---SELECTED ITEM---*/
$(".periodicity-selectable").click(function() {
if(!$(this).hasClass('selected-item')) {
$('.periodicity-selectable').removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $(".entity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
});
})(jQuery);

you can just make a combined function, and pass it this from click event handler of each class. In the new function just remove class from the siblings of current element. something like this:
(function($) {
"use strict";
function combinedFunction(element){
if(!$(element).hasClass('selected-item')) {
$(element).siblings().removeClass('selected-item');
}
$(element).toggleClass('selected-item');
if ($(".entity-selectable").hasClass("selected-item") && $(".periodicity-selectable").hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
}
/*---SELECTED ITEM---*/
$(".entity-selectable").click(function() {
combinedFunction(this);
});
/*---SELECTED ITEM---*/
$(".periodicity-selectable").click(function() {
combinedFunction(this);
});
})(jQuery);

Probably not the most extensible option, but a quick easy way is the following.
$(".entity-selectable").click(onClick);
$(".periodicity-selectable").click(onClick);
function onClick() {
var className = '';
if ($(this).hasClass('entity-selectable')) {
className = 'entity-selectable';
} else if ($(this).hasClass('periodicity-selectable')) {
className = 'periodicity-selectable';
}
if(!$(this).hasClass('selected-item')) {
$('.'+ className).removeClass('selected-item');
}
$(this).toggleClass('selected-item');
if ($(this).hasClass("selected-item") && $("." + className).hasClass("selected-item")) {
$("#hidden-content").addClass("fadeInUp");
}
}

turn off the onclick during the function runnig

I want to turn off the onclick till the function that was called by the onclick is done. How can I do that? But I don't want to turn off the onclick forever
function move() {
//do things...
$("#carr").off("click");
}
dado.onclick = move;

While you can add and remove eventListeners, it might be a better idea to add a guard for the function invocation, e.g.
var isRunning = false;
function myFunction(e, cb) {
// do stuff
return cb();
}
function guard(functionToRun, e) {
if (isRunning) {
return;
}
isRunning = true;
functionToRun(e, function() {
isRunning = false;
});
}
$someNode.on('click', guard.bind(this, myFunction));

You are on the right track. Use JQuery's bind and unbind functions:
function move() {
$("#carr").unbind("click");
//do stuff
$("#carr").bind("click", function () {
move();
});
}
$(document).ready(function () {
move();
});

Jquery check if var is a function and then call it

I have a variable name that I pass into a plugin, but the variable is actually a function.
I use jquery $.isFunction to check if it is a function, and if it is, it should execute the function.
But I can't seem to make it work, I put some examples in jsfiddle:http://jsfiddle.net/tZ6U9/8/
But here is a sample code:
HTML
<a class="one" href="#">click</a><br />
<a class="two" href="#">click</a><br />
<a class="three" href="#">click</a><br />
JS
$(document).ready(function() {
help = function(var1) {
alert(var1);
}
function help2(var1) {
alert(var1);
}
$('a.one').click(function() {
var functionName = "help";
if ($.isFunction([functionName])) {[functionName]("hello");
} else {
alert("not a function");
}
return false;
});
$('a.two').click(function() {
var functionName = "help";
if ($.isFunction(functionName)) {
functionName("hello");
} else {
alert("not a function");
}
return false;
});
$('a.three').click(function() {
var functionName = "help2";
if ($.isFunction(functionName)) {
functionName("hello");
} else {
alert("not a function");
}
return false;
});
$('a.four').click(function() {
var functionName = "help2";
if ($.isFunction([functionName])) {[functionName]("hello");
} else {
alert("not a function");
}
return false;
});
});​
As you can see, I tired a bunch of things, but all the wrong ones probably...
I inspired some of them from: jQuery - use variable as function name
Overall
I'm passing a variable that has the same name as a function, using jquery to check if it is a function, if it is, it should execute the function.
Thanks in advance for your help.

If you are wanting to call a function by a string of its name just use window.
var functionName = "help";
if ($.isFunction(window[functionName])) {
window[functionName]("hello");
} else {
alert("not a function");
}

You can use the following to invoke functions that are defined in the window/global scope, such as the function help:
if ($.isFunction(window[functionName])) {
window[functionName]("hello");
}
help2, on the other hand, is not accessible this way since you are defining it in a closure. A possibile solution is to define the function outside of the .ready() handler. Then, you can use window[functionName] to call it:
var namespace = {
help: function (var1) {
alert(var1);
},
help2: function (var1) {
alert(var1);
}
}
$(document).ready(function() {
var functionName = "help";
if ($.isFunction(namespace[functionName])) {
namespace[functionName]("hello");
}
});
DEMO.

Check Fiddle for the working example.
Example have only one link working. make other links similarly.
Edit: after first comment
HTML
<a class="one" href="#">click</a><br />
JS
var help = function(var1) {
alert(var1);
}
$(document).ready(function() {
$('a.one').click(function() {
var functionName = help;
if ($.isFunction(functionName)) {
functionName('test');
} else {
alert("not a function");
}
return false;
});
});​

Where in this code do I need to put 'return false'?

When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#
I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
});

It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:
$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
e.preventDefault();
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
This has the same effect as return false, but with the following advantages:
It is semantically more logical -- it does what it says
You can put it at the head of the function, so it is immediately obvious
You can have multiple exit points without having to ensure they are all return false
If any part of your code causes an error, the default action will still be prevented

like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});

Probably you need to add the return false also in the $('a#slide-toggle').click() function
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
**return false;**
});
});

I think, it should be like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});

You have one at the end of slide-up; add one to the end of slide-toggle.