We Keep Coding

Incremental value without exceeding on a specific variable

I have this following code that automatically increments a number. I want to increment the number based on the expected value. then stop the increment. Please see below the code
var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);
function numberFormat(n) {
n += '';
x = n.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
(function loop() {
setTimeout(function() {
var counter = document.getElementById('counter');
var current = parseInt(counter.value.replace(',', ''));
var max_add = 1;
var min_add = 1;
if (counter.value == expected_value) {
counter.value = true_value;
} else {
counter.value = numberFormat(current + Math.floor(Math.random() * max_add + min_add));
}
loop();
}, 100);
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">

You could validate the looped value and expected value before recursive loop call
Updated
its stop if max_add change or else loop value hit above expected_value
var expected_value = 1000;
var val = expected_value - 60;
$("#counter").val(val);
function numberFormat(n) {
n += '';
x = n.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
setTimeout(function(){
max_add = Math.random()
},3000)
var max_add = 1,new_add = 1;
var val = 0;
(function loop() {
setTimeout(function() {
var counter = document.getElementById('counter');
var current = parseInt(counter.value.replace(',', ''));
var min_add = 1;
if (counter.value == expected_value) {
counter.value = true_value;
} else {
val = current+Math.floor(Math.random()*10)+ Math.floor(Math.random() * max_add + min_add);
counter.value = numberFormat(val);
}
if (val <= expected_value && max_add == new_add) { //matching the loop value and expected value
loop();
}
new_add = max_add
}, 100);
}());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="counter" type="text" readonly="true">

Can't Find Cause and Solution to Javascript Error

When I run my code, there's an error saying: Cannot set property 'src' of null
The error is in this for loop:
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for
Here is all of the code leading up to that point:
<script>
//Create Canvases and Images
var canvas;
var img;
var index;
for (var i = 1; i <= 40; i++) {
index = 6 * i;
canvas = document.createElement("canvas");
canvas.id = "hour" + index + "canvas";
canvas.width = 1024;
canvas.height = 764;
img = document.createElement("img");
img.id = "hour" + index + "map";
img.src = " ";
canvas.appendChild(img);
document.body.appendChild(canvas);
}//end for
//Time Variables
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
var currentDay = new Date().getDate();
var currentHour = new Date().getHours();
var currentRun;
//Formatting Time Variables for URLs
if (currentMonth < 10) {
currentMonth = "0" + currentMonth;
}//end if
if (currentDay < 10) {
currentDay = "0" + currentDay;
}//end if
//Finding Latest Model Run
if (currentHour >= 0 && currentHour < 6) {
currentRun = "00";
}//end if
if (currentHour >= 6 && currentHour < 12) {
currentRun = "06";
}//end if
if (currentHour >= 12 && currentHour < 18) {
currentRun = "12";
}//end if
if (currentHour >= 18 && currentHour < 24) {
currentRun = "18";
}//end if
var currentRun = currentRun;
//Creating URLs
var mapAddresses = [];
for (i=6; i<=240; i=i+6) {
mapAddressFor = "http://www.tropicaltidbits.com/analysis/models/gfs/" + currentYear + currentMonth + currentDay + currentRun + "/gfs_mslp_pcpn_neus_" + i/6 + ".png";
mapAddresses.push(mapAddressFor);
}//end for
//Insert Images to Document
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for
How can I get rid of this error? I can't figure our why there's an error, and how can I fix it?

You create 40 elements:
for (var i = 1; i <= 40; i++) {
// ...
img.id = "hour" + index + "map";
// ...
}//end for
and try to set 48
for (i=1; i<=48; i++) {
document.getElementById("hour" + i*6 + "map").src = mapAddresses[i-1];
}//end for

How to disable specific dates in Magento Order Delivery Date extensions calendar

I want to disable specific dates in Magento Connect Order Delivery Date Calendar and tried many ways. But could not be successful. Below is my code. It says "TypeError: $.inArray is not a function" when click on the calendar icon.
disableFunc : function(date)
{
var day_off_array = dayoff.split(",") ;
currentTime = new Date();
var d1=currentTime.getDate();
var m1=currentTime.getMonth();
var y1=currentTime.getFullYear();
m1=m1+1;
var counter = 1;
var disabledDays =
["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
return [false];
}
}
return [true];
if(y < y1)
{
return true;
}
else if(m1 > m && y==y1)
{
return true;
}
}
and this is the original code.
disableFunc : function(date)
{
var y = calendar.date.getFullYear();
var m = calendar.date.getMonth();
var d = calendar.date.getDate();
var day_off_array = dayoff.split(",") ;
//document.write(day_off_array);
currentTime = new Date();
var d1=currentTime.getDate();
var m1=currentTime.getMonth();
var y1=currentTime.getFullYear();
var counter = 1;
for (var i=0; i<day_off_array.length;i++){
if (day_off_array[i]>=0 && day_off_array[i]!=''){
if (date.getDay()==day_off_array[i]){
if (date.getDate()==currentTime.getDate()){
test_flag=true;
}
return true;
}
}
}
if(y < y1)
{
return true;
}
else if(m1 > m && y==y1)
{
return true;
}
}
Any helps would be appreciated.

It's too late to answer the question, but this may help someone like me!
var disabledDays = ["10-20-2014", "10-21-2014", "11-15-2014", "11-17-2014"];
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
var dd = (m+1) + '-' + d + '-' + y;
if(disabledDays.indexOf(dd) != -1) {
return true;
}
}

Stripchart using raphael.js only partially functioning in IE8

I'm using Raphael.js to help in creating a Stripchart, but unfortunately it's not displaying the actual data in IE8. The grid for the chart is displaying but that's about it. Does anything in the code jump out at you as to why this may be an issue? Just looking for a second set of eyes, thanks!
/*
* accelerometer charts, needs raphael-min.js
*/
function Stripchart(element) {
var ret = new SChart(element);
return ret;
}
function SChart(element) {
vpwidth = element.offsetWidth;
vpheight = element.offsetHeight;
tzero = 0;
mspertick = 100.0;
bwidth = 0;
bheight = 0;
mgperpx = 1000.0 / 30.0;
chanwidth = 2;
labelheight = 8;
labelevery = 30000;
arraymax = vpwidth * (mspertick/5) * 2;
xchan = new Array(arraymax);
ychan = new Array(arraymax);
zchan = new Array(arraymax);
clock = new Array(arraymax);
head = 0;
tail = 0;
Paper = Raphael(element, vpwidth, vpheight);
this.svg_line = function(x1, y1, x2, y2) {
var ret = "M" + parseInt(x1) + " " + parseInt(y1) + " L" + parseInt(x2) + " " + parseInt(y2);
return ret;
}
this.clear = function() {
Paper.clear();
}
this.draw_grid = function(torigin) {
epsilon = this.clockToTick(torigin-tzero) % 10;
yzero = vpheight / 2;
tline = 0;
tlast = (parseInt(torigin/labelevery) + 1) * labelevery;
for (i = vpwidth-bwidth - epsilon ; i > bwidth; i-= 10) {
svg = this.svg_line(i, bheight, i, vpheight-bheight);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = 0; i < torigin-tzero; i += labelevery) {
if(i > torigin - this.tickToClock(vpwidth-bwidth*2) - tzero) {
xpos = vpwidth - bwidth - this.clockToTick(torigin - tzero - i);
minutes = parseInt(i/60000);
seconds = parseInt((i%60000)/1000);
if(seconds < 10) {
seconds = "0" + seconds;
}
timestring = "" + minutes + ":" + seconds;
Paper.text(xpos, vpheight-bheight-(labelheight/2)-1, timestring);
}
}
for (i = yzero; i > bheight; i -= 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
for (i = yzero; i < vpheight-bheight; i += 15) {
svg = this.svg_line(bwidth, i, vpwidth-bwidth, i);
l = Paper.path(svg);
l.attr("stroke", "#eee");
l.attr("stroke-width", "1");
l.attr("opacity", 0.75);
}
var svg = this.svg_line(bwidth, yzero, vpwidth-bwidth, yzero);
var l = Paper.path(svg);
l.attr("stroke-width", "1");
l.attr("stroke", "#ddd");
l.attr("opacity", 0.75);
var r = Paper.rect(bwidth, bheight, vpwidth-bwidth*2, vpheight-bheight*2);
r.attr("stroke-width", "2");
r.attr("stroke", "#ccc");
r.attr("opacity", 0.75);
}
this.draw_channel = function(data, color) {
var now;
var svg_path = ""
var mean_datum = 0;
var this_tick;
var prev_tick;
var count;
var xorig = vpwidth-bwidth;
var yorig = vpheight / 2;
// this.text(150, 40, "head = " + head + " tail = " + tail);
if (head == tail) {
return;
}
i = this.prev(head);
now = this.clockToTick(clock[i]);
prev_tick = now;
count = 0;
mean_datum = 0;
// this.text(150, 30, now + " " + i);
// console.log("Start " + this.prev(head) + " end " + this.prev(tail) + " max " + arraymax);
for(i = this.prev(head); i != this.prev(tail); i = this.prev(i)) {
this_tick = this.clockToTick(clock[i]);
if(this_tick == prev_tick) {
mean_datum += data[i];
++count;
} else {
mean_datum = parseInt(mean_datum / count);
if(svg_path.length == 0) {
svg_path = "M";
} else {
svg_path += "L";
}
svg_path += parseInt(xorig - now + prev_tick) + " ";
yplot = yorig - this.chanToPx(mean_datum);
if(yplot < 1) {
yplot = 1;
} else if(yplot > vpheight - bheight) {
yplot = vpheight - bheight;
}
svg_path += parseInt(yplot);
mean_datum = data[i];
count = 1;
prev_tick = this_tick;
}
if(xorig - now + this_tick <= bwidth) {
break;
}
}
var chan_path = Paper.path(svg_path);
if(color == "#00f") {
// console.log(svg_path);
}
chan_path.attr("stroke", color);
chan_path.attr("stroke-path", 1);
chan_path.attr("stroke-width", chanwidth);
chan_path.attr("opacity", 0.9);
}
this.text = function(x, y, s) {
Paper.text(x, y, s);
}
this.prev = function(index) {
var ret;
ret = index - 1;
if(ret <= 0) {
ret += arraymax;
}
return ret;
}
this.next = function(index) {
var ret;
ret = index + 1;
if(ret >= arraymax) {
ret -= arraymax;
}
return ret;
}
this.dequeue = function() {
if(head != tail) {
tail = this.next(tail);
}
}
this.enqueue = function() {
var ret = head;
head = this.next(head);
// detect collision
if(this.next(head) == tail) {
this.dequeue();
}
return ret;
}
this.add_datum = function(time, x, y, z) {
// assume java applet has already handled clock rollover
var entry = this.enqueue();
if(tzero == 0) {
tzero = parseInt(time);
}
clock[entry] = parseInt(time);
xchan[entry] = parseInt(x);
ychan[entry] = parseInt(y);
zchan[entry] = parseInt(z);
// console.log("Adding datum " + entry + " head " + head + " tail " + tail);
// clock[head] = parseInt((parseInt(time) + (mspertick / 2)) / mspertick);
// xchan[head] = parseInt((parseInt(x) + (mgperpx / 2)) / mgperpx);
// ychan[head] = parseInt((parseInt(y) + (mgperpx / 2)) / mgperpx);
// zchan[head] = parseInt((parseInt(z) + (mgperpx / 2)) / mgperpx);
// this.text(150, 30, "(" + clock[head] + ", " + xchan[head] + ", " + ychan[head] + ", " + zchan[head] + ")");
// while(clock[head] - clock[tail] > vpwidth - (bwidth * 2)) {
// tail++;
// if (tail >= arraymax) {
// tail -= arraymax;
// }
// }
}
this.tickToClock = function(tick) {
ret = tick * mspertick;
return ret;
}
this.clockToTick = function(clock_ms) {
ret = parseInt(((mspertick / 2) + clock_ms) / mspertick);
return ret;
}
this.chanToPx = function(chan) {
ret = parseInt((chan + (mgperpx / 2)) / mgperpx);
return ret;
}
this.draw = function() {
var top = this.prev(head);
this.clear();
this.draw_grid(clock[top]);
this.draw_channel(xchan, "#00f");
this.draw_channel(ychan, "#0f0");
this.draw_channel(zchan, "#f00");
}
this.reset = function() {
tzero = 0;
head = 0;
tail = 0;
}
this.add_test_datum = function(tick) {
// add some jitter +/- 16ms
time = tick * mspertick + 16 - Math.floor(Math.random() * 32);
x = Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
y = 1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
z = -1000 + Math.floor(Math.random() * 1000) - Math.floor(Math.random() * 1000);
time = "" + time;
x = "" + x;
y = "" + y;
z = "" + z;
this.add_datum(time, x, y, z);
}
this.test_animate = function(self) {
var tid;
var tcount = 0;
var tmax = 500;
function interval_display() {
for (i=0 ; i<10; i++) {
tcount++;
self.add_test_datum(tcount);
}
self.draw(tcount);
if(tcount > tmax) {
clearInterval(tid);
}
}
tid = setInterval(interval_display, 2500);
}
}

Uneven Countup Timer Jquery Based on Time of Day

I was looking for a jquery countup timer that was based on the time of day, and I was struggling to find one so here I just wrote my own. Here it is for anyone who's looking for one.
The objective is to take the time of day, calculate a percentage through the day of that current time, multiply it by an objective sum and start adding to create a realistic timing scenario. My timers are firing to create the simulation of an unsteady data flow, but you can change it to a steady increase easily.
The element with the number is #counter, and the objective total is the 3.5mm.

var currentNumber;
$(document).ready(function (e) {
var currDate = new Date();
var mins = currDate.getMinutes();
var hours = currDate.getHours();
var seconds = currDate.getSeconds();
var combined = (hours * 60 * 60) + (mins * 60) + seconds;
var percentage = (combined / 90000);
var startingPoint = Math.round(3500000 * percentage);
currentNumber = startingPoint;
$('#counter').html(formatNumber(startingPoint));
setTimeout(function () {
updateNumber(currentNumber)
}, 100);
});
function updateNumber(startingPoint) {
if (startingPoint % 58 === 0) {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 850);
} else if (startingPoint % 22 === 0) {
startingPoint += 4;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 500);
} else if (startingPoint % 6 === 0) {
startingPoint += 1;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 75);
} else {
startingPoint += 5;
currentNumber = startingPoint;
$('#counter').html(formatNumber(currentNumber));
setTimeout(function () {
updateNumber(currentNumber)
}, 250);
}
}
function formatNumber(number) {
return addCommas((number).toFixed(0));
}
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}