The following code works, but I'd like to use the self-invoking function syntax when declaring it instead of calling it explicitly on the last line:
var ShowMe = function() {
if ($('input:checkbox:checked').length) {
$('#Save').fadeIn('slow');
} else {
$('#Save').hide();
}
};
$('input:checkbox').on('click',ShowMe);
ShowMe();
You can't declare the var inside of an expression, but you can put its definition in one:
var ShowMe; (ShowMe = function() {
if ($('input:checkbox:checked').length) {
$('#Save').fadeIn('slow');
} else {
$('#Save').hide();
}
})();
$('input:checkbox').on('click',ShowMe);
Try this instead:
var ShowMe = function() {
if ($(this).length) { // `this` is the input that was clicked
$('#Save').fadeIn('slow');
} else {
$('#Save').hide();
}
};
$('input:checkbox').on('click', ShowMe).trigger('click');
Update based on comments below:
$('#Save').hide();
$('input:checkbox').on('click', function() {
if(this.checked) { //check if this is checked
$('#Save').show('slow');
}
else if(!($('input[type="checkbox"]:checked').length)) {
//check to see if anything else was checked
$('#Save').hide();
}
});
Related
I'm trying to seperate concerns using the module pattern and everything is going Ok except that I'm trying to delegate the dom strings from a module (the UIController module) to another actually I succeeded at doing it once but I don't know what is happening know it didn't work
as you see above the Domstrings object is inside the UIcontroller module so I expose it to the public so the other modules could use it
and as you see I did it before and it works fine without any problem as you see below
but when I use it inside the internalController module I got this error
so here is where I'm using it in:
so here is my code and thank you in advance:
JS
var internalController = (function(UICtrl) {
addItem: function(day, from, to, text, goingToCkecked) {
var newPlan, ID,Dom=UICtrl.getDOMstrings();
if (day === 'pick the day') {
document.querySelector(Dom.errorCase).style.visibility = "visible";
document.querySelector(".optionList").classList.add("error-red");
} else {
document.querySelector(".error-case").style.visibility = "hidden";
document.querySelector(".optionList").classList.remove("error-red");
console.log("that is me");
}
document.querySelector("#optionList").addEventListener("change", function(e) {
document.querySelector(".error-case").style.visibility = "hidden";
document.querySelector(".optionList").classList.remove("error-red");
});
})(UIController);
var UIController = (function() {
var DOMstrings = {
inputDay: ".optionList",
inputTimeF: ".inputTime",
inputTimeT: ".inputTime2",
inputText: ".inputText",
goingToCkecked: ".checkboxx",
inputBtn: ".add__btn",
planContainer: ".container",
errorCase: ".error-case",
optionList: ".optionList",
};
return {
getInput: function() {
return {
inputDay: document.querySelector(DOMstrings.inputDay).value,
inputTimeF: document.querySelector(DOMstrings.inputTimeF).value,
inputTimeT: document.querySelector(DOMstrings.inputTimeT).value,
inputText: document.querySelector(DOMstrings.inputText).value,
goingToCkecked: document.querySelector(DOMstrings.goingToCkecked).checked,
};
},
getDOMstrings: function() {
return DOMstrings;
},
}
}
};
})();
var controller = (function(interCtrl, UICtrl) {
var input, newPlan;
function setupEventListeners() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener("click", ctrlAddPlans);
document.addEventListener("keypress", function(e) {
if (e.keyCode === 13) {
ctrlAddPlans();
}
});
}
return {
init: function() {
console.log('the app has started');
setupEventListeners();
},
};
})(internalController, UIController);
controller.init();
// setInterval(function() {
// }, 100);
setTimeout(function() {
document.querySelector(".plansBackground").classList.add("height");
}, 1000);
I'm trying to change my text and image on click (mobile only) but it's not working. Only the image can be changed with the function I wrote. Could anyone help me with that, please?
Here is the live code: https://codepen.io/oleanderek/pen/OdNzME
document.querySelectorAll(".nav__label").forEach((el) => {
el.addEventListener('click', changeArrow);
el.addEventListener('click', changeText);
});
function changeArrow() {
var arrow = this.getElementsByClassName('arrow')[0];
if (arrow.classList.contains("down-arrow")) {
arrow.classList.remove("down-arrow");
arrow.classList.add("up-arrow");
} else if (arrow.classList.contains("up-arrow")) {
arrow.classList.remove("up-arrow");
arrow.classList.add("down-arrow");
}
}
function changeText() {
var changeText = this.getElementsByClassName('showText')[0];
if (changeText.classList.contains("showText")) {
arrow.classList.remove("showText");
arrow.classList.add("hideText");
} else if (changeText.classList.contains("hideText")) {
arrow.classList.remove("hideText");
arrow.classList.add("showText");
}
}
If you delete the class to change, the variable you define remains undefined. Therefore, you must define a class that you will not change. I added newClass This works fine.
HTML
<p class="newClass showText">.</p>
Javascript
document.querySelectorAll(".nav__label").forEach((el) => {
el.addEventListener('click', changeArrow);
el.addEventListener('click', changeText);
});
function changeArrow() {
var arrow = this.getElementsByClassName('arrow')[0];
if (arrow.classList.contains("down-arrow")) {
arrow.classList.remove("down-arrow");
arrow.classList.add("up-arrow");
} else if (arrow.classList.contains("up-arrow")) {
arrow.classList.remove("up-arrow");
arrow.classList.add("down-arrow");
}
}
function changeText() {
var changeText = document.querySelector(".newClass");
if (changeText.classList.contains("showText")) {
changeText.classList.remove("showText");
changeText.classList.add("hideText");
} else if (changeText.classList.contains("hideText")) {
changeText.classList.remove("hideText");
changeText.classList.add("showText");
}
}
I am trying to make a when statement but it is not working as planned. Basically its a function to call another function when try. First before I explain further here is the syntax
when(function() {
//code here
});
Now basically... Think this way.. We have a progressbar.. We also have a custom event such as...
var pBarEvent = document.createEvent('Event');
pBarEvent.initEvent('pbardone', true, true);
document.addEventListener('pbardone', function() {
//code here
});
//if progress bar reaches 100 dispatchEvent
if (document.querySelector(".progress-bar").style.width === 100 + "%")
{
document.dispatchEvent(pBarEvent);
}
Now that piece of code is an example. If the document loads and its for instance at 50% it wont trigger until you add another event such as keydown or click. I dont want to do that I want to do.... "when" progress bar width equals 100% trigger it. Thats basically what needs to happen. So here is the code for the when statement so far (keep in mind its not the best looking one. As I dont normally do this but I wanted to keep this dynamic and who knows someone who later wants to do this can look at this question)
when function
function when(func)
{
var nowActive = false;
if (!typeof func === 'undefined')
{
func = new Function();
}
if (func)
{
nowActive = true;
clearInterval(whenStatementTimer);
}
else
{
nowActive = false;
var whenStatementTimer = setInterval(function() {
switch(func)
{
case true:
{
nowActive = true;
when();
break;
}
case false:
{
nowActive = false;
when();
break;
}
}
}, 1000);
}
if (nowActive === true)
{
func();
}
}
Now this does not work when I go to try something like....
when(function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("100%");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style("body", "background", "black");
});
});
It does not trigger. I need help possibly getting this when statement to work. What am I doing wrong? What can I do to fix it? No errors get thrown but it never fires.
edit based on answer
Function tried
function when(currentValue)
{
try
{
var o = {};
o.currentValue = currentValue;
o.do = function(func)
{
if (!typeof func === 'undefined')
{
func = new Function();
}
if (this.currentValue)
{
func();
}
else
{
setTimeout(this.do(func), 100);
}
};
return o;
}
catch(e)
{
console.log(e);
}
}
used as
when(true).do(function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("This divs going through changes!!");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style(".div", "background", "black");
});
});
This does not work. It never fires. But if I use a onclick listener as such it fires
document.addEventListener("click", function() {
SmartLeadJS.SmartLeadEvents.customEvents.progressBarFull(function() {
alert("This divs going through changes!!");
SmartLeadJS.SmartLeadAds.LeadView.ChromeExtension.General.DynamicStyles.$.style(".div", "background", "black");
});
}, false);
function when(statement){
o={};
o.statement=statement;
o.do=function(func){
awhen(this.statement,func);
};
return o;
}
function awhen(statement,func){
if(eval(statement)){
func();
}else{
window.setTimeout(function(){awhen(statement,func);},100);
}
}
Use:
when("true").do(function(){});
It works now :) . Its important to put the condition in ""!
I want to optimize my Js code, at the moment i am rewriting the same function to launch a game in a popup. The only difference between the functions (open_web_client, open_web_client_2) is the openPopup size
I would like to use the same function for both games launched in the pop up, how can i use just a function for both in order to avoid repeating all the code?
This is the code
$(document).ready(function() {
web_client();
});
var web_client = function() {
var open_web_client = function(e) {
e.preventDefault();
if (!app.userIsLoggedIn()) {
app.showLoginPopup(translate.login_required_to_play_for_real);
} else {
if (Utils.analytics_enabled()) {
Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
}
new GameWindow($(this).attr('href'), 'LOBBY').openPopup('1100x800');
}
}
var open_web_client_2 = function(e){
e.preventDefault();
if(!app.userIsLoggedIn()){
app.showLoginPopup(translate.login_required_to_play_for_real);
} else {
if(Utils.analytics_enabled()){
Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
}
new GameWindow($(this).attr('href'), 'LOBBY').openPopup('1024x768');
}
}
if ($("a.ea_client").size() > 0) {
$('a.ea_client').on("click", open_web_client);
$('a.oneworks_client').on("click", open_web_client_2);
}
};
The only difference between the two functions is the value that is passed to openpopup.
So create a common function and pass the dimensions to the event handler.
var open_web_client = function(e) {
e.preventDefault();
if (!app.userIsLoggedIn()) {
app.showLoginPopup(translate.login_required_to_play_for_real);
} else {
if (Utils.analytics_enabled()) {
Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
}
//here the hardcoded value is replaced with e.data.dim
new GameWindow($(this).attr('href'), 'LOBBY').openPopup(e.data.dim);
}
};
then modify the handler code to pass the dimensions uniquely
$('a.ea_client').on("click",{dim:'1100x800'}, open_web_client);
$('a.oneworks_client').on("click",{dim:'1024x768'}, open_web_client);
arguments passed this way to handlers can be accessed through data property present in the event object.
The only difference between the functions (open_web_client, open_web_client_2) is the openPopup size
That is basically begging to become a parameter of your function:
function open_web_client(e, size) {
e.preventDefault();
if (!app.userIsLoggedIn()) {
app.showLoginPopup(translate.login_required_to_play_for_real);
} else {
if (Utils.analytics_enabled()) {
Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
}
new GameWindow($(this).attr('href'), 'LOBBY').openPopup(size);
}
}
$('a.ea_client').on("click", function(e) {
open_web_client(e, '1100x800');
});
$('a.oneworks_client').on("click", function(e) {
open_web_client(e, '1024x768');
});
A littlebit more advanced technique is to use a closure, with a function that creates the listener:
function make_web_client_opener(size) {
return function open_web_client(e) {
e.preventDefault();
if (!app.userIsLoggedIn()) {
app.showLoginPopup(translate.login_required_to_play_for_real);
} else {
if (Utils.analytics_enabled()) {
Utils.analytics_track_click('Play', $(this).attr("data-game-name"));
}
new GameWindow($(this).attr('href'), 'LOBBY').openPopup(size);
}
};
}
$('a.ea_client').on("click", make_web_client_opener('1100x800'));
$('a.oneworks_client').on("click", make_web_client_opener('1024x768'));
How do I get this code to work in the "head" tag of the HTML. I must use these two functions, and cannot use only one function. I know this is bad practice, but how would I go about doing this? Thank you for your help.
var myImage;
function prepareEventHandlers() {
var myImage = document.getElementById('mainImage');
}
function runEvents() {
myImage.onclick = function() {
alert('You clicked on the image.');
};
}
window.onload = function() {
prepareEventHandlers();
runEvents();
}
You need to remove var in prepareEventHandlers(), because you are declaring a new local variable called myImage, not assigning the outer one.
var myImage;
function prepareEventHandlers() {
myImage = document.getElementById('mainImage');
}
Remove the "var" in your prepareEventHandlers() function.
var myImage;
function prepareEventHandlers() {
myImage = document.getElementById('mainImage');
}
function runEvents() {
myImage.onclick = function() {
alert('You clicked on the image.');
};
}
window.onload = function() {
prepareEventHandlers();
runEvents();
}