We Keep Coding

Can you nest on click events?

I'm making a pomodoro clock with a break timer and a session timer. I'm using a single numpad to input the data into each clock by trying to nest the o'clock event to set each clock. To make it happen you click the display for the clock and then start inputting the buttons. There is 0-9 a delete button and an enter button. I haven't been able to get it to even display anything for either function. So I'm starting to wonder if what I'm trying to do would even work? Just looking for whether you can nest on click events and if so what I'm doing wrong. Or another method for what I'm looking to do. Made a fiddle to view it minimize the js and css windows. https://jsfiddle.net/zackluckyf/jhe98j05/1/
$(".session-time-clock").click(function(){
// changes the color to make it flash, add a duration and then change it back
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
sessionTimeClock = "00:00";
counter = 4;
/*
Will this work?
*/
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
sessionTimeClock = sessionTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
sessionTimeClock = "00:" + input + sessionTimeClock.slice(4);
}
if(counter === 1)
{
sessionTimeClock = "0" + input + sessionTimeClock.slice(2);
}
if(counter === 0)
{
sessionTimeClock = input + sessionTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
sessionTimeClock = "00:0" + sessionTimeClock.slice(4);
}
else if(counter === 1)
{
sessionTimeClock = "00:" + sessionTimeClock.slice(3);
}
else if(counter === 0)
{
sessionTimeClock = "0" + sessionTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".session-time-clock").text("hello");
});
});
$(".break-time-clock").click(function(){
$(".num-button").css("background-color", "#BCC6CC");
function myFunction() {
myVar = setTimeout(changeBackground, 500);
}
function changeBackground() {
$(".num-button").css("background-color", "#575e62");
}
myFunction();
breakTimeClock = "00:00";
counter = 4;
$("button").click(function(){
// gets button text label
var input = $(this).text();
// if, else if chain for calculator functions
if(input !== "Start" && input !== "Pause" && input !== "Reset" && input !== "X" && input !== "Enter" && counter > -1)
{
if(counter === 4)
{
breakTimeClock = breakTimeClock.slice(0,counter-1) + input;
}
if(counter === 3)
{
breakTimeClock = "00:" + input + breakTimeClock.slice(4);
}
if(counter === 1)
{
breakTimeClock = "0" + input + breakTimeClock.slice(2);
}
if(counter === 0)
{
breakTimeClock = input + breakTimeClock.slice(1);
}
counter--;
if(counter === 2)
{
counter--;
}
}
else if(input === "X")
{
if(counter === 3)
{
breakTimeClock = "00:0" + breakTimeClock.slice(4);
}
else if(counter === 1)
{
breakTimeClock = "00:" + breakTimeClock.slice(3);
}
else if(counter === 0)
{
breakTimeClock = "0" + breakTimeClock.slice(1);
}
}
else if(input === "Enter")
{
return;
}
$(".break-time-clock").text(breakTimeClock);
});
});

The supplied code is not identical to the jsfiddle. I will relate to the jsfiddle:
You have this code:
$("button").click(function(){
if(input === "Start")
{
// start clock code
}
else if(input === "Pause")
{
// pause clock code
}
else if(input === "Reset")
{
sessionTimeClock = "00:00";
breakTimeClock = "00:00";
}
return true;
});
This is the first time you assign a click handler to "button" and therefore it gets called first.
The "input" variable is not defined, and therefore the other handlers are not called. (You can see an error in the Dev Tools console).

scroll to searched word from top to bottom with button click

I want to scroll to searched word one by one when I click down button. Please see Fiddle for code implemented
$('#searchfor').keypress(function(){
var page = $('#all_text');
var pageText = page.text().replace("<span>","").replace("</span>");
var searchedText = $('#searchfor').val();
var theRegEx = new RegExp("("+searchedText+")", "igm");
var newHtml = pageText.replace(theRegEx ,"<span>$1</span>");
page.html(newHtml);
});

see this example : http://jsfiddle.net/kevalbhatt18/ju6xxwvb/13/
i used js from hear Search and Highlight in jQuery
and button login is wrriten
var find = function(results, type, counter, adjPx, $el) {
if (results.length > 0) {
if (type === 'next') {
if (counter > 0 && results.length == counter) {
counter = 0;
}
} else if (type === 'prev') {
if (counter < 0) {
counter = results.length - 1;
} else if (counter === results.length) {
counter = counter - 2;
}
}
results.removeClass("active");
$(results[counter]).addClass("active");
if ($el) {
$('html,body').animate({
scrollTop: $(results[counter]).offset().top - adjPx
}, 100);
} else {
$el.animate({
scrollTop: $(results[counter]).offset().top - adjPx
}, 100);
}
counter = (type === 'prev') ? counter - 1 : counter + 1;
}
return counter;
};

Javascript Testing Corners of an Array (Grid)

I'm doing this project trying to reproduce Schelling's Segregation model. I have a function(below) that is testing to see if the four immediate adjacent cells of the array are either the same or different or empty compared to the current cell being tested.
There are four possible spots to be tested for every cell in the array. But on corners and side spots, obviously you cant test spaces that are out of bounds. So in the function, if it finds one of the out of bounds spaces it decrements the number total around the cell. However, it keeps crashing telling me that I have an Uncaught Reference Error: Cannot read property '0' of undefined. I can't tell why its crashing.
The final lines of this code take the number of goods(similar cells) and the total number of cells around it (empty cells do not count) and gets a percentage similar.
Any help would be appreciated into telling me why it might be crashing and giving me an error? Thanks!
model.Test = function( i, j )
{
var numberToTest= 4;
var goods= 0;
if ((i - 1) >= 0)
{
if (model.BoardArray[i-1][j] != "E")
{
if (model.BoardArray[i][j] == model.BoardArray[i-1][j])
{
goods++;
}
}
else
{
numberToTest--;
}
}
else
{
numberToTest--;
}
if((i + 1) < $("#BoardSizeValue").val())
{
if (model.BoardArray[i+1][j] != "E")
{
if (model.BoardArray[i][j] == model.BoardArray[i+1][j])
{
goods++;
}
}
else
{
numberToTest--;
}
}
else
{
numberToTest--;
}
if ((j - 1) >= 0)
{
if (model.BoardArray[i][j-1] != "E")
{
if (model.BoardArray[i][j] == model.BoardArray[i][j-1])
{
goods++;
}
}
else
{
numberToTest--;
}
}
else
{
numberToTest--;
}
if ((j + 1) < $("#BoardSizeValue").val())
{
if (model.BoardArray[i][j+1] != "E")
{
if (model.BoardArray[i][j] == model.BoardArray[i][j+1])
{
goods++;
}
}
else
{
numberToTest--;
}
}
else
{
numberToTest--;
}
var similar = $("#SimilarSlider").val()/100;
if (numberToTest == 0)
{
return false;
}
else
{
var needed = goods/numberToTest;
if (needed >= similar)
{
return false;
}
else
{
return true;
}
}
}

From looking at your code, you would only get a Reference Error: Cannot read property '0' of undefined. if i was out of the bounds of the array.
I think the problem might be in this part of the code:
if ((i - 1) >= 0) {
if (model.BoardArray[i-1][j] != "E") {
if (model.BoardArray[i][j] == model.BoardArray[i-1][j]) {
if i = $("#BoardSizeValue").val() and $("#BoardSizeValue").val() is a one-based index of the array size, then [i-1] would be okay, but not [i]. So try adjusting your code to this:
if ((i - 1) >= 0 && i < $("#BoardSizeValue").val()) {
if (model.BoardArray[i-1][j] != "E") {
if (model.BoardArray[i][j] == model.BoardArray[i-1][j]) {
This would also apply to the j comparisons as well.

Javascript calling so fast

I have an annoying little issue here. I have code which loads content from page2 and appends it to #content. That works, but sometimes it happens twice, then appends page3 before page2. Thats because in page3, there is just one post, but in page2, 4 posts.
How can I make my code wait until the append finishes to run again? Here's my code:
$(window).scroll(
function(){
if(browserName != "safari") {
var curScrollPos = $('html').scrollTop();
}
else {
var curScrollPos = $('body').scrollTop();
}
if(curScrollPos > 218) {
$("#sidebar").addClass("open");
}
if(curScrollPos < 218) {
$("#sidebar").removeClass("open");
}
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
if(scrollBottom == 0) {
if(home != 0 || search != 0 || category != 0) {
if(currentPage < numPages) {
$("#main .loader-posts").fadeIn();
currentPage++;
if(search == 1) {
var getPostsUrl = "page/"+currentPage+"/?s="+searchTerm;
}
else {
var getPostsUrl = "page/"+currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut(
'slow',
function(){
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
});
});
}
}
else {
}
}

Add a variable that keeps track of whether you are loading the next page or not and then only load if you are not currently loading something else. This is the root of your problem. .scroll() may fire twice before the next section is loaded, and as long as currentPage < numPages it will increment currentPage and load again. And, because .get() is asynchronous, you are not guaranteed to finish the first .get() request before any subsequent request. Adding a loading state fixes this.
var loading = 0; // Loading state
if (scrollBottom == 0) {
if (home != 0 || search != 0 || category != 0) {
if (currentPage < numPages && !loading) { // Only proceed if not loading
loading = 1; // We have initiated loading
$("#main .loader-posts").fadeIn();
currentPage++;
if (search == 1) {
var getPostsUrl = "page/" + currentPage + "/?s=" + searchTerm;
} else {
var getPostsUrl = "page/" + currentPage;
}
$.get(getPostsUrl, function(data) {
$("#main .loader-posts").fadeOut('slow', function() {
var newPosts = $(data).find("#content").html();
$("#content").append(newPosts);
$('#container.tiles').masonry('reload');
loading = 0; // We are done loading
});
});
}
} else {
}
}

Maybe you can add an isBusy flag that you can check before the $.get(), and set it to false in the $.get() callback?

Unexpectedly passing integer by reference?

I'm having some issues with this. For some reason, updateCurrentItem is always called with the same parameter regardless.
function updatePromoList(query) {
query = query.toUpperCase();
clearCurrentList();
var numItems = 0;
currentItem = 0;
result_set = cached[query.charAt(0)][query.charAt(1)][query.charAt(2)];
for(i in result_set){
if(numItems >= NUMBER_MATCHES){
$("<li/>").html("<span style='color: #aaa'>Please try to limit your search results</span>").appendTo("#possibilities").mouseover(function(event){ updateCurrentItem(numItems+1); });
break;
}
promo = result_set[i];
found_number = false;
if (!promo.client)
found_number = (promo.prj_number.toString().substr(0,query.length) == query) ? true : false;
if (query.length >= MATCH_NAME) {
if(promo.prj_name && typeof promo.prj_name == 'string'){
found_name = promo.prj_name.toUpperCase().indexOf(query);
} else {
found_name = -1;
}
if (promo.client)
found_client = promo.client_name.toString().indexOf(query);
else
found_client = -1;
} else {
found_name = -1;
found_client = -1;
}
if(found_client >= 0) {
var thisIndex = numItems+1;
console.log("setting", thisIndex);
$("<li/>").text(promo.client_name).bind('click',function(e){ updatePromoChoice(e,promo); }).appendTo("#possibilities").mouseover(function(event){ updateCurrentItem(thisIndex); }); } else if(found_name >= 0 || found_number) { var thisIndex = numItems+1;
console.log("setting", thisIndex);
$("<li/>").text(promo.prj_number+": "+promo.prj_name).bind('click',function(e){ updatePromoChoice(e,promo); }).appendTo("#possibilities").mouseover(function(event){ updateCurrentItem(thisIndex); });
}
if(found_number || found_client >= 0 || found_name >= 0){
numItems++;
}
}
}
function updateCurrentItem(i){
currentItem = i;
console.log("updating to", i);
}
The results of running this are:
setting 0
setting 1
setting 2
setting 3
setting 4
setting 5
setting 6
setting 7
setting 8
setting 9
setting 10
setting 11
setting 12
setting 13
then when I move my mouse over the content area containing these <li>s with the mouseOver events, all I ever see is:
updating to 4
Always 4. Any ideas?

You're creating a closure but it's still bound to the numItems variable:
function(event){ updateCurrentItem(numItems+1); }
What you should do is something like this:
(function(numItems){return function(event){ updateCurrentItem(numItems+1); }})(numItems)
Edit: I think I might have the wrong function but the same principle applies:
function(event){ updateCurrentItem(thisIndex); }
should be
(function(thisIndex)
{
return function(event){ updateCurrentItem(thisIndex); }
})(thisIndex)