Develop Reference

javascript counter with cookies doesn't work

I just tried to make a timer with cookies that makes a button only 3 times clickable (I had to do it with cookies cause it refreshes the page in its process), I made this timer but it doesn't work. Nothing on my page changed at all.
The code I have by //something else happens gets executed by the program.
Timer - (or at least what I thought that would work as a timer) :
mailagain.onclick = function () {
if (typeof getCookie("countIt") !== 'undefined') {
if (checkCookie("countIt") > 3) {
// something happens
} else {
//something else happens
var counter = checkCookie("countIt") + 1;
setCookie("countIt", counter, 1)
}
} else {
setCookie("countIt", 1, 1)
}
};
Coockie functions :
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie(name) {
var value = getCookie("name");
if (value != "") {
return value;
}
}

Some issues:
When reading the value from the cookie, be aware that it has the string data type. You need to convert it to number before comparing it with another number or adding 1 to it.
The function checkCookie is using the wrong (hard-coded) cookie name, but is even not necessary as a function. You can do all that with getCookie.
Here is a working version:
mailagain.onclick = function () {
// make sure to convert to number (unitary plus), or use 0 when it is not a number:
var counter = (+getCookie("countIt") || 0) + 1;
setCookie("countIt", counter, 1)
if (counter > 3) {
console.log('clicked too many times! (', counter, ')');
} else {
console.log('clicked ' + counter + ' number of times.');
}
};

var value = getCookie("name");
getCookie always return "undefined" because of wrong cookie name. Remove brakets.
function checkCookie(name) {
var value = getCookie(name); //here you go
if (value != "") {
return value;
}
}

Multiple Countdowns on One Page

I have a countdown woking nicely, however I'm at the stage where I need multiple instances of it on the same page. The script I'm using I found online and is just straight JavaScript but my JavaScript isn't very good so I'm not sure how to modify it to make each counter unique.
JavaScript:
function calcage(secs, num1, num2) {
s = ((Math.floor(secs/num1))%num2).toString();
if (LeadingZero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
function CountBack(secs) {
if (secs < 0) {
document.getElementById("cntdwn").innerHTML = FinishMessage;
return;
}
DisplayStr = DisplayFormat.replace(/%%D%%/g, calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML = DisplayStr;
if (CountActive)
setTimeout("CountBack(" + (secs+CountStepper) + ")", SetTimeOutPeriod);
}
function putspan(backcolor, forecolor) {
document.write("<span id='cntdwn' style='background-color:" + backcolor +
"; color:" + forecolor + "'></span>");
}
if (typeof(BackColor)=="undefined")
BackColor = "white";
if (typeof(ForeColor)=="undefined")
ForeColor= "black";
if (typeof(TargetDate)=="undefined")
TargetDate = "12/31/2020 5:00 AM";
if (typeof(DisplayFormat)=="undefined")
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if (typeof(CountActive)=="undefined")
CountActive = true;
if (typeof(FinishMessage)=="undefined")
FinishMessage = "";
if (typeof(CountStepper)!="number")
CountStepper = -1;
if (typeof(LeadingZero)=="undefined")
LeadingZero = true;
CountStepper = Math.ceil(CountStepper);
if (CountStepper == 0)
CountActive = false;
var SetTimeOutPeriod = (Math.abs(CountStepper)-1)*1000 + 990;
putspan(BackColor, ForeColor);
var dthen = new Date(TargetDate);
var dnow = new Date();
if(CountStepper>0)
ddiff = new Date(dnow-dthen);
else
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
Usage:
<script language="JavaScript">
TargetDate = "$variable";
BackColor = "palegreen";
ForeColor = "navy";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
FinishMessage = "It is finally here!";
</script>
Any help is appreciated.

The key is to bring everything into a local scope. Everything you have there is in the global scope so it only allows for one instance. You should wrap everything in a function and make an object instead. I also used setInterval instead of setTimeOut. Finally, you want to act on existing HTML containers not make html (you have it doing document.write which makes a dynamic container and writes that to the page).
jsFiddle Demo: http://jsfiddle.net/4dh6a5ky/2/
html:
<!-- container 1 for a timer -->
<div id="time1"></div>
<!-- container 2 for a timer -->
<div id="time2"></div>
<script src="/js/script.js"></script>
<script language="JavaScript">
// Create instance of your countdown with it's own settings
var counterOne = new CountDown({
// This is the id name for the container (<div id="time1"></div>)
send_to:'time1',
forecolor:'red',
targetdate:'09/22/2016 9:39 AM'
});
// Create instance #2 with it's own settings
var counterTwo = new CountDown({
// This is the id name for the container (<div id="time2"></div>)
send_to:'time2',
forecolor:'blue',
targetdate:'09/22/2016 9:40 AM'
});
// Apply the creation method
// Without .create(), nothing will happen since all the working
// script to apply the counter is in this method
counterOne.create();
counterTwo.create();
</script>
/js/script.js:
var CountDown = function(data)
{
// Assign this object
var thisObj = this;
// Make sure all settings are not left undefined
data.send_to = (typeof data.send_to === "undefined")? "time1" : data.send_to;
data.backcolor = (typeof data.backcolor === "undefined")? "white" : data.backcolor;
data.forecolor = (typeof data.forecolor === "undefined")? "black" : data.forecolor;
data.targetdate = (typeof data.targetdate === "undefined")? "12/31/2020 5:00 AM" : data.targetdate;
data.displayformat = (typeof data.displayformat === "undefined")? "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds." : data.displayformat;
data.countactive = (typeof data.countactive === "undefined")? true : data.countactive;
data.message = (typeof data.message === "undefined")? "Ended" : data.message;
data.countstepper = (typeof data.countstepper != "number")? -1 : data.countstepper;
data.leadingzero = (typeof data.leadingzero === "undefined")? true : data.leadingzero;
// Get DOM object
var domObj = document.getElementById(data.send_to);
this.calcage = function(secs, num1, num2)
{
var s = ((Math.floor(secs/num1))%num2).toString();
if(data.leadingzero && s.length < 2)
s = "0" + s;
return "<b>" + s + "</b>";
}
this.putSpan = function(backcolor, forecolor)
{
// Modify html instead of making html
domObj.style.backgroundColor = backcolor;
domObj.style.color = forecolor;
}
this.writeBoard = function(secs,countDownEngine)
{
if(secs <= 0) {
clearInterval(countDownEngine);
domObj.innerHTML = data.message;
return;
}
var DisplayStr = '';
DisplayStr = data.displayformat.replace(/%%D%%/g, thisObj.calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, thisObj.calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, thisObj.calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, thisObj.calcage(secs,1,60));
domObj.innerHTML = DisplayStr;
}
this.create = function()
{
data.countstepper = Math.ceil(data.countstepper);
if(data.countstepper == 0)
data.countactive = false;
var SetTimeOutPeriod = ((Math.abs(data.countstepper)-1)*1000) + 990;
thisObj.putSpan(data.backcolor, data.forecolor);
var dthen = new Date(data.targetdate);
var dnow = new Date();
var nowCalc = (data.countstepper > 0)? (dnow-dthen) : (dthen-dnow);
var ddiff = new Date(nowCalc);
var gsecs = Math.floor((ddiff.valueOf()/1000));
var countDownEngine = setInterval(function() {
gsecs = gsecs+data.countstepper;
thisObj.writeBoard(gsecs,countDownEngine);
}, 1000);
}
}

retrieve content from blogger post to display on Home page using specific labels posts

I am displaying posts from a specific label on the home page.
Then, in it, I have to display some more information for each particular posts of that label. As shown in the image below -
I am not an expert but I think we can do it with JavaScript. by applying reference codes or variables in while writing each post such as:-
var/code some texts to retrieve from this post to home page under label posts var/code]
and retrieve it using javascript to display on specific label posts on the home page
still didn't find any clue how can I do this.. any suggestion, please.
this is code to show specific lable post on home page:
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json) {
document.write('<ul id="label_with_thumbs">');
for(var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if(i == json.feed.entry.length) break;
for(var k = 0; k < entry.link.length; k++) {
if(entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commenttext = entry.link[k].title;
var commenturl = entry.link[k].href;
}
if(entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
var thumburl;
try {
thumburl = entry.media$thumbnail.url;
} catch(error) {
s = entry.content.$t;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if((a != -1) && (b != -1) && (c != -1) && (d != "")) {
thumburl = d;
} else thumburl = 'http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';
}
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "June";
monthnames[7] = "July";
monthnames[8] = "Aug";
monthnames[9] = "Sept";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="clearfix">');
if(showpostthumbnails == true) document.write('<img class="label_thumb" src="' + thumburl + '"/>');
document.write('<strong>' + posttitle + '</strong><br>');
if("content" in entry) {
var postcontent = entry.content.$t;
}
elseif("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if(showpostsummary == true) {
if(postcontent.length < numchars) {
document.write('');
document.write(postcontent);
document.write('');
} else {
document.write('');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0, quoteEnd);
document.write(postcontent + '...');
document.write('');
}
}
var towrite = '';
var flag = 0;
document.write('<br>');
if(showpostdate == true) {
towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
flag = 1;
}
if(showcommentnum == true) {
if(flag == 1) {
towrite = towrite + ' | ';
}
if(commenttext == '1 Comments') commenttext = '1 Comment';
if(commenttext == '0 Comments') commenttext = 'No Comments';
commenttext = '' + commenttext + '';
towrite = towrite + commenttext;
flag = 1;;
}
if(displaymore == true) {
if(flag == 1) towrite = towrite + ' | ';
towrite = towrite + 'More »';
flag = 1;;
}
document.write(towrite);
document.write('</li>');
if(displayseparator == true)
if(i != (numposts - 1)) document.write('');
}
document.write('</ul>');
}
//]]>
</script>
display codes:
<script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/label name?published&alt=json-in-script&callback=labelthumbs"></script>

If Statement on Date submit

would need help on the statement below:
its a form submission for date and its not a mandatory field.
how can i submit without any value ?
because currently i can't submit the form without value in date field.
Thank you
function ABC_StringIsDateFormatddMMyyyy(str) {
if (str.length != 8) {
return false;
}
var strYear = str.substring(4, 8);
var strMonth = str.substring(2, 4);
var strDay = str.substring(0, 2);
if (isNaN(strYear)) {
return false;
}
if (isNaN(strMonth)) {
return false;
}
if (isNaN(strDay)) {
return false;
}
var d = new Date();
d.setFullYear(strYear, parseInt(strMonth) - 1, strDay);
strYear = d.getFullYear();
strMonth = d.getMonth() + 1;
strMonth = "00" + strMonth;
strMonth = strMonth.substring(strMonth.length - 2, strMonth.length);
strDay = d.getDate();
strDay = "00" + strDay;
strDay = strDay.substring(strDay.length - 2, strDay.length);
var tmp = strDay + strMonth + strYear;
if (str != tmp) {
return false;
}
return true;
}

Return true if the field is empty.
function ABC_StringIsDateFormatddMMyyyy(str) {
if (str.length == 0) {
return true;
}
if (str.length != 8) {
return false;
}
var strYear = str.substring(4, 8);
var strMonth = str.substring(2, 4);
var strDay = str.substring(0, 2);
if (isNaN(strYear)) {
return false;
}
if (isNaN(strMonth)) {
return false;
}
if (isNaN(strDay)) {
return false;
}
var d = new Date();
d.setFullYear(strYear, parseInt(strMonth) - 1, strDay);
strYear = d.getFullYear();
strMonth = d.getMonth() + 1;
strMonth = "00" + strMonth;
strMonth = strMonth.substring(strMonth.length - 2, strMonth.length);
strDay = d.getDate();
strDay = "00" + strDay;
strDay = strDay.substring(strDay.length - 2, strDay.length);
var tmp = strDay + strMonth + strYear;
if (str != tmp) {
return false;
}
return true;
}

Pop up once every 30 days

I am totally novice for JS and cookies. I got this code online and tried to change it for 30 days (it was set to 365) but it's probably resetting the cookie for every page and the pop up appears if I go to other page or even return back to the original page. Only things I changed in the code was expire days to 30 and load delay of 30 secs.
It seems either it's resetting the cookie every time I move to other page or some other problem which I don't understand yet :). I was wondering if there is some more efficient way to have it rather putting the code in every html article page. Something like setting up a cookie in headers or something and recalling using body onload.
Here is the code:
<SCRIPT language=JavaScript>
<!--
var expDays = 30; // number of days the cookie should last
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
function SetCookie (name, value,expires) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));
function getCookieVal(offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function checkCount() {
var count = GetCookie('poponce');
if (count == null) {
count++;
SetCookie('poponce', count, exp);
// Action to take
dothis()
}
}
setTimeout(function dothis(){
var windowprops = "left=300,top=240,width=600,height=400,location=no,toolbar=no,menubar=no,scrollbars=no";
window.open("/subscribepopup.html", "", windowprops); // Use to load a page
}, 30000);
// -->
</SCRIPT>
<body OnLoad="checkCount()">