We Keep Coding

SetInterval does not work when it is in another function?

When I put setInterval(autoAdmit, 1000) just below the autoAdmit() function, it works but when I place it in the if statements of another function, it does not work. Any ideas on why this is happening? I can't find anything that's wrong with it. forgot to mention: the part not working is the autoAdmit() function. When I put a console.log in the function, it still logs but what is inside the for loop is not executed for some reason.
let clickIntervalId = null;
function autoAdmit() {
for (let element of document.getElementsByTagName('span')) {
if (element.innerHTML === 'Admit') {
console.log('There is someone waiting to join this meeting, automatically admitting them...');
element.click();
}
}
}
//setInterval(autoAdmit, 1000) (if it is placed here it works)
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
function isChecked() {
if (checkbox.checked ) {
// do this
if(clickIntervalId) clearInterval(clickIntervalId);
clickIntervalId = setInterval(autoAdmit, 1000); //(if it is placed here, it doesn't work)
console.log('checked')
} else {
// do that
clearInterval(clickIntervalId);
console.log('not')
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
function check() {
isChecked();
}
setTimeout(check, 2000)
}
);

custom when statement not firing functions

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 ""!

Clear local storage for div on radio selection

I'm trying to get local storage to clear for all fields in one specific div when the user selects the No radio button:
Slightly incomplete jsfiddle but should do the trick
I'm obviously not doing something right here (.hide-show-yes is where I want all fields inside that div to clear):
$(document).ready(function(){
$('input[name="for_person"]').on('click', function () {
if ($('#personNo').prop('checked')) {
// ??
$('.hide-show-yes').localStorage.removeItem('fname');
} else {
// do nothing
}
});
});

localStorage is not a jQuery method . Also
$(document).ready([function() {
if (localStorage["dontclear"]) {
$('#dontclear').val(localStorage["dontclear"]);
}
if (localStorage["fname"]) {
$('#fname').val(localStorage["fname"]);
}
if (localStorage["lname"]) {
$('#lname').val(localStorage["lname"]);
}
console.log(localStorage)
}, function() {
$('.stored').change(function() {
localStorage[$(this).attr('name')] = $(this).val();
console.log(localStorage)
});
$('input[name="for_person"]').on('click', function() {
if ($('#personNo').prop('checked')) {
// ??
localStorage.removeItem('fname');
} else {
// do nothing
}
});
}]);
plnkr http://plnkr.co/edit/LPw3zbpgrhJkSh1hdKXG?p=info

Bootstrap on and off toggle switch

stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if ($(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if (!$(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}
I have a button which will load a div containing an events stream, I want it to load div-content (the stream) on page load but be able to turn it on and off which will hide or show the content respectively. This currently loads content but does not have the hide and show functionality that I need. (Hide function isn't working.) What am I missing?
dash-stream is the button.
stream = $('#dash-stream');
streamCheck();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
$(".stream-section-hold").show();
$('#dash-stream').click(function() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true", "true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
});
}
This works but only on every second click.

Fixed it.
loadStreamJson("true","true");
streamCheck();
$(stream).hasClass('active-dash');
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
$(stream).click(function() {
streamCheck();
});
function streamCheck() {
if (!$(stream).hasClass('active-dash')) {
$(stream).addClass('active-dash');
$(".stream-section-hold").show();
//loadPostsJson("load-stream", "#stream-holder", 1);
loadStreamJson("true","true");
} else if ($(stream).hasClass('active-dash')) {
$(".stream-section-hold").hide();
$(stream).removeClass('active-dash');
};
}

Optimizing long on click event

I have the following code which changes the text in a certain element on click depending on the text value present in the element at the time the event is fired.
http://jsfiddle.net/TNDhL/
$('#left').on('click', function (){
if ($("#textContainer:contains('something')").length) {
$('#textContainer').text('third text replacement');
$('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
$('#textContainer').text('now the next item');
$('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
$('#textContainer').text('new text here');
$('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
$('#textContainer').text('something');
$('.elsewhere').text('text here');
}
});
$('#right').on('click', function (){
if ($("#textContainer:contains('something')").length) {
$('#textContainer').text('new text here');
$('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
$('#textContainer').text('now the next item');
$('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
$('#textContainer').text('third text replacement');
$('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
$('#textContainer').text('something');
$('.elsewhere').text('text here');
}
});
Please see fiddle above for working version.
I'd like to find a way to make this more manageable in order to make extending this further easier. Is there a better way to handle this case? Condensing this into a function and using variables to store the value of #textContainer would be more ideal. Any suggestions?

Seems like a perfect case for a closure which can track your progress with a simple counter.. Could look something like this:
var myTextRotator = (function () {
var myPhraseArray = ["first phrase", "second phrase"],
counter = 0;
return {
clickLeft: function () {
counter -= 1;
return myPhraseArray[counter]; //return array item or do your processing here
},
clickRight: function () {
counter += 1;
return myPhraseArray[counter]; //return array item or do your processing here
}
};
}());
Tie the clickLeft and clickRight methods to an jQuery .on(). May have to add a conditional in there so the counter doesn't go below 0 or above the array length.
You would use this like:
$(".left").on("click", function () {
myTextRotator.clickLeft();
});
$(".right").on("click", function () {
myTextRotator.clickRight();
});