jQuery plugin events fire only once - javascript

I am making a very minimalistic calendar plugin for the website with jQuery. I have not had much expirience with it, so I was following plugin tutorial. I have two <a> links that should change month, but unfortunately they do so only once and then both of them stop working. I suspect I have put events to a wrong place.
Sorry for quite messy code it is just a blueprint yet.
Here is the javascript.
(function($){
$.fn.extend({
jSimpleCalendar : function(currentDate)
{
return this.each(
function()
{
obj = $(this);
result = renderCalendar(currentDate);
obj.html(result);
// Event handlers
$('#JQSCMonthPrev').click(function ()
{
currentDate.setMonth(currentDate.getMonth() - 1);
result = renderCalendar(currentDate);
obj.html(result);
});
$('#JQSCMonthNext').click(function ()
{
currentDate.setMonth(currentDate.getMonth() + 1);
result = renderCalendar(currentDate);
obj.html(result);
});
});
function renderCalendar(date)
{
// Get the calendar
calendar = createMonthArray(date);
// Build xhtml
var result = '<table class="jQSCTable">';
result += '<thead><tr><td colspan=4>< ' + getMonthNames()[date.getMonth()] + ' ></td>';
result += '<td colspan=3>< ' + date.getFullYear() + ' <a href="#" id="JQSCYearNext" >></a></td></tr></thead><tbody>';
for(i=0;i<(calendar.length);i++)
{
result += '<tr>';
for (a=1; a<=7; a++)
{
result += '<td>';
if(calendar[i][a]!='N')
{
result += '<a id="JQSCLink' + calendar[i][a] + '">' + calendar[i][a] + '</a>';
}
result += '</td>';
}
result += '</tr>';
}
result += '</tbody></table>';
return result;
};
function createMonthArray(date)
{
// Get first day of month
date.setDate(1);
// Make callendar
var calendar = new Array();
// Fill empty shit from previous month
for(i=0;i<date.getDay()-1;i++)
calendar.push('N');
// Get number of days
var numberOfDays = getNumberOfDaysMonth(date);
//Fill the rest
for(i=1;i<numberOfDays+1;i++)
calendar.push(i);
// Get number of end days
var endDays = calendar.length % 7 - 1;
//Fill the empty stuff at the end
for(i=0;i<7-endDays;i++)
calendar.push('N');
//Slice to seven pieces
var slicedCalendar = new Array();
var week = 0;
slicedCalendar[0] = new Array();
for(i=1;i<calendar.length;i++)
{
slicedCalendar[week][i-week*7] = calendar[i-1];
if (((i%7)==0)&&(i!=0))
{
week++;
slicedCalendar[week] = new Array();
}
}
return slicedCalendar.splice(0, week);
};
function getNumberOfDaysMonth(date)
{
var minDays = 28;
var dateFound = false;
var oldMonth = date.getMonth();
var workDate = new Date(date.getYear(), date.getMonth(), 1);
while (!dateFound)
{
workDate.setDate(minDays+1);
var newMonth = workDate.getMonth();//new month date
if (newMonth != oldMonth)//if the month has changed
dateFound = true;
else
minDays++;
}
return minDays;
}
// Month names
function getMonthNames()
{
var month = Array();
month[0] = 'January';
month[1] = 'February';
month[2] = 'March';
month[3] = 'April';
month[4] = 'May';
month[5] = 'June';
month[6] = 'July';
month[7] = 'August';
month[8] = 'September';
month[9] = 'Octorber';
month[10] = 'November';
month[11] = 'December';
return month;
}
}
});
})(jQuery);
Here is html test.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jSimpleCalendar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#calendar").jSimpleCalendar(new Date());
});
</script>
</head>
<body>
<div id="calendar">
</div>
</body>
</html>

Seems like what's happening is the HTML is being rewritten when you click the first time. When this happens, the click events are no longer bound to the hrefs since the older elements were removed from the DOM.
You could put the click events into it's own function and call the function after rebuilding the calendar or use event delegation. For this, append the click event on the #calendar div and track which element was clicked.
http://www.learningjquery.com/2008/03/working-with-events-part-1

Related

sum number each day javascript / jquery

every day add the value in the div with + 1 a type of counter
...
var i = 1;
$(".teste").each(function () {
i = parseFloat(i) + parseFloat($(this).data("teste"));
});
$(".teste").html(i);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="teste" data-teste="2" id="teste"> </div>
If you want to increment i by 1 every day you will need some kind of loop and check against the date to see if the day has changed.
var i = parseInt($(this).data("teste")) + 1;
var running = true;
var currentDate = new Date();
while (running == true)
{
if (currentDate.toDateString() != (new Date()).toDateString())
{
i = parseInt(i) + parseInt($(this).data("teste"));
$(".teste").html(i);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="teste" data-teste="2" id="teste"> </div>

how to get previous month and next month results on html using javascript

I have this code which you can select date and get results according to it. Now in the place of months and years selection i want a button that shows previous month and another button that shows next month. Like that Next day and previous day. Can someone please help me with this code snippet.
1. Button one - Previous month
2. Button two - Next month
3. Button three - Previous Day
4. Button four - Next Day
All results should be on HTML page.
<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE TYPE="text/css">
TD, TH {text-align:center}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function getFirstDay(theYear, theMonth){
var firstDate = new Date(theYear,theMonth,1)
return firstDate.getDay()
}
function getMonthLen(theYear, theMonth) {
var oneDay = 1000 * 60 * 60 * 24
var thisMonth = new Date(theYear, theMonth, 1)
var nextMonth = new Date(theYear, theMonth + 1, 1)
var len = Math.ceil((nextMonth.getTime() -
thisMonth.getTime())/oneDay)
return len
}
var theMonths = ["January","February","March","April","May","June","July","August",
"September","October","November","December"]
function getObject(obj) {
var theObj
if (document.all) {
if (typeof obj == "string") {
return document.all(obj)
} else {
return obj.style
}
}
if (document.getElementById) {
if (typeof obj == "string") {
return document.getElementById(obj)
} else {
return obj.style
}
}
return null
}
function populateTable(form) {
var theMonth = form.chooseMonth.selectedIndex
var theYear = parseInt(form.chooseYear.options[form.chooseYear.selectedIndex].text)
// initialize date-dependent variables
var firstDay = getFirstDay(theYear, theMonth)
var howMany = getMonthLen(theYear, theMonth)
// fill in month/year in table header
getObject("tableHeader").innerHTML = theMonths[theMonth] +
" " + theYear
// initialize vars for table creation
var dayCounter = 1
var TBody = getObject("tableBody")
// clear any existing rows
while (TBody.rows.length > 0) {
TBody.deleteRow(0)
}
var newR, newC
var done=false
while (!done) {
// create new row at end
newR = TBody.insertRow(TBody.rows.length)
for (var i = 0; i < 7; i++) {
// create new cell at end of row
newC = newR.insertCell(newR.cells.length)
if (TBody.rows.length == 1 && i < firstDay) {
// no content for boxes before first day
newC.innerHTML = ""
continue
}
if (dayCounter == howMany) {
// no more rows after this one
done = true
}
// plug in date (or empty for boxes after last day)
newC.innerHTML = (dayCounter <= howMany) ?
dayCounter++ : ""
}
}
}
function fillYears() {
var today = new Date()
var thisYear = today.getFullYear()
var yearChooser = document.dateChooser.chooseYear
for (i = thisYear; i < thisYear + 5; i++) {
yearChooser.options[yearChooser.options.length] = new Option(i, i)
}
setCurrMonth(today)
}
// set month choice to current month
function setCurrMonth(today) {
document.dateChooser.chooseMonth.selectedIndex = today.getMonth()
}
</SCRIPT>
</HEAD>
<BODY onLoad="fillYears(); populateTable(document.dateChooser)">
<H1>Calender</H1>
<HR>
<TABLE style="width:100%;height:80%;" ID="calendarTable" BORDER=1 ALIGN="center">
<TR>
<TH ID="tableHeader" COLSPAN=7></TH>
</TR>
<TR><TH>Sun</TH><TH>Mon</TH><TH>Tue</TH><TH>Wed</TH>
<TH>Thu</TH><TH>Fri</TH><TH>Sat</TH></TR>
<TBODY ID="tableBody"></TBODY>
<TR>
<TD COLSPAN=7>
<P>
<FORM NAME="dateChooser">
<SELECT NAME="chooseMonth"
onChange="populateTable(this.form)">
<OPTION SELECTED>January<OPTION>February
<OPTION>March<OPTION>April<OPTION>May
<OPTION>June<OPTION>July<OPTION>August
<OPTION>September<OPTION>October
<OPTION>November<OPTION>December
</SELECT>
<SELECT NAME="chooseYear" onChange="populateTable(this.form)">
</SELECT>
</FORM>
</P></TD>
</TR>
</TABLE>
</BODY>
</HTML
I suggest to use moment.js. It helps alot when you work with time and date.
e.g. after pressing a button "next month" you can use moment().add(1, 'months') to add 1 month to your current date. you can store the date after switching e.g. on data attributes or hidden input or ...
complete documentation you can find on https://momentjs.com/docs/

how to split the string in javascript?

I have a text file which contains list of dates and respective events, which looks as follows,
txt:
2017-05-01: All Day Event:
2017-05-06: Day Event:
2017-05-15: abc Event:
2017-06-05: All Event:
2017-06-03: Al Event:
At first, I am using a simple split function to split the contents of the text file,
var text=xmlhttp.responseText;
var amber=text.split(':');
In the amber array each date and events are stored simultaneously, what I need to do is access the dates alone and split the day, month and year, I tried using the following code
var stwo="";
for (var i = 0; i < amber.length; i += 2) {
stwo = amber[i].split('-');
}
but when I try to access the contents of stwo[] it shows "undefined", I've also tried declaring stwo like this
stwo=[" "," "];
because I thought stwo wasn't defined as an array, what have I done wrong? Is there any other way I can split the dates?
here is my complete code.,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<title>SAPUI5 EVENT CALENDAR</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.ui.layout,sap.me"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"></script>
<script>
jQuery.sap.require("sap.me.Calendar");
jQuery.sap.require("sap.m.RadioButton");
calendar = new sap.me.Calendar({
firstDayOffset : 1
});
var xmlhttp,text;
xmlhttp=new XMLHttpRequest();
xmlhttp.open('GET','C:/Users/Manimaran/Desktop/project/nn.txt',false);
xmlhttp.send();
var text=xmlhttp.responseText;
var amber=text.split(':');
for (var t = 0; t < amber.length; t+=2)
{
calendar.toggleDatesType([amber[t]],sap.me.CalendarEventType.Type07,
true);
//document.write(a[i+1]+"<br>");
}
calendar.toggleDatesType([ "2017/05/15" ],
sap.me.CalendarEventType.Type07,
true);
var msgLabel = new sap.m.Label({
width : "100%"
});
calendar.attachTapOnDate(function(oEvent) {
/* date=oEvent.getParameters().date;
msgLabel.setText(date)*/
});
calendar.attachChangeCurrentDate(function(oEvent) {
var stwo=[" "," "];
for (var i=0;i<amber.length;i+=2)
{
stwo=amber[i].split('-');
}
/*for (var j=1;j<stwo.length;j+=3)
{
switch(stwo[j]){
case '01' : stwo[j]="Jan";
break;
case '02' : stwo[j]="Feb";
break;
case '03' : stwo[j]="Mar";
break;
case '04' : stwo[j]="Apr";
break;
case '05' : stwo[j]="May";
break;
case '06' : stwo[j]="Jun";
break;
case '07' : stwo[j]="Jul";
break;
case '08' : stwo[j]="Aug";
break;
case '09' : stwo[j]="Sep";
break;
case '10' : stwo[j]="Oct";
break;
case '11' : stwo[j]="Nov";
break;
case '12' : stwo[j]="Dec";
break;
default:"gokka makka";
}
}*/
var comp=oEvent.getParameters().currentDate;
var tmp=comp.split(' ');
if(tmp[1]==tmp[1]){
msgLabel.setText(stwo);
alert(stwo[1]);
}else{
alert('error');
}
});
var unselectBtn = new sap.m.Button({
text : "unselect all",
press : function() {
var aDates = calendar.getSelectedDates();
calendar.unselectAllDates();
msgLabel.setText("unselected " + aDates.length + " dates");
alert(text);
}
});
var app = new sap.m.App();
var page = new sap.m.Page({
headerContent : unselectBtn,
content : [ calendar, new sap.m.Label({
width : "100%",
text : "Messages log"
}), msgLabel]
});
// Colgate: weeks start on sunday, and show 2 months
calendar.setSingleRow(false);
calendar.setMonthsToDisplay(1);
// calendar.setWeeksPerRow(1);
calendar.setMonthsPerRow(1);
calendar.setFirstDayOffset(0);
app.addPage(page);
app.placeAt('content');
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
<p id="display"></p>
</body>
</html>
You are just assigning the value to stwo every time..
So all the split values before the last one will be lost.
Also the last string in the split(':') would be empty because after the last : there is nothing in the give string.
So finally nothing will be assigned to stwo.
Check this snippet
var text = "2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:";
var amber = text.split(':');
var stwo;
console.log(amber);
for (var i = 0; i < amber.length; i += 2) {
if (amber[i] != "") {
stwo = amber[i].split('-');
}
}
console.log(stwo);
If you can see, even if check for empty strings.. Only the last date will be split and added to the variable stwo.
To store each split value you can use an Array within an Array (MultiDimesional array)
var text = "2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:";
var amber = text.split(':');
var stwo = new Array();
console.log(amber);
var j = 0;
for (var i = 0; i < amber.length; i += 2) {
if (amber[i] != "" && amber[i].indexOf('-') > 1) {
stwo[j] = amber[i].split('-');
j++;
}
}
console.log(stwo);
You parse through each log line like so:
// ES6
const txt = `
2017-05-01: All Day Event:
2017-05-06: Day Event:
2017-05-15: abc Event:
2017-06-05: All Event:
2017-06-03: Al Event:
`
const amber = txt.trim().split('\n');
const logDates = amber.map(line => line.split(':')[0]);
const logDatesSplitted = logDates.map(logDate => logDate.split('-'));
console.log(logDatesSplitted);
// ES5: Fast Splitting by colon
var amber_ = txt.trim().split(':');
var logDates_ = [];
for(var i = 0; i < amber_.length; i += 2) {
if(amber_[i] == "") continue; // filter out last empty log record;
var logDate = amber_[i].trim().split('-');
logDates_.push(logDate);
}
console.log(logDates_);
Checkout this
var test = '2017-05-01: All Day Event:2017-05-06: Day Event:2017-05-15: abc Event:2017-06-05: All Event:2017-06-03: Al Event:';
test = test.replace(/:+$/g,"");
var test1 = test.split(':');
var test2 = [];
for (var i = 0; i < test1.length; i += 2) {
test2.push(test1[i].split('-'));
//console.log(test2);
}
console.log(test2);

Change Javascript cookies redirection

i found this javascript that allow you to chose an option and once you click the go button. It will redirect you to another site. I have try modify this so i can use it with a button instead of a radio but it doesn't seem to work. Can any 1 help me out ??
Thank you very much.
here the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
//chose which page to go to
function Link() {
if (document.fred.r1[0].checked) {
window.top.location = 'http://kshowonline.com/list';
}
if (document.fred.r1[1].checked) {
window.top.location = 'https://www.google.com/';
}
if (document.fred.r1[2].checked) {
window.top.location = 'https://www.yahoo.com/';
}
if (document.fred.r1[3].checked) {
window.top.location = 'https://nodejs.org/';
}
}
//-->
</script>
</head>
<body onload="f19_GetFormCookie();Link();">
<form title="f19_Include" name="fred">
<INPUT type="radio" name="r1">Baseball
<INPUT type="radio" name="r1">Basketball
<INPUT type="radio" name="r1">Soccer
<INPUT type="radio" name="r1">Fencing
<INPUT type="button" value="GO" onclick="f19_SetFormCookie();Link();">
</form>
<script language="JavaScript" type="text/javascript">
<!--
// A Cookie Script to Store and Retrieve
// the values and states of common form elements
// TEXT BOXES - value
// TEXT AREA - value
// CHECK BOX - checked state
// RADIO BUTTON - checked state
// SELECT LIST - selected Index
// Application Notes and Customising Variables
// Application Notes
// Values and states of each element are stored
// as the page is unloaded or form submitted.
// The storage duration is specified by a customising variable
// Stored values and states of elements included in the cookie
// are re-established as the page is reloaded.
// The number and type of elements included must respect
// the maximum cookie size of 4K.
// The Retrieval is initialised by a <BODY> onload event
// The Storage occurs on a <BODY> onunload event
// e.g.
// <body onload="f19_GetFormCookie();" onunload="f19_SetFormCookie();" >
// To include a form element in the Store and Retrieve
// it must be child nodes of an element with a title of 'f19_Include'
// e.g.
// <span title="f19_Include" >
// <INPUT type="text" size="10" >
// <INPUT type="checkbox >
// </span>
// There may be any number of elements titled 'f19_Include' on a page
// and as many child elements of each 'f19_Include' as required.
// All variable, function etc. names are prefixed with 'f19_'
// to minimise conflicts with other JavaScripts
// Customising Variables
var f19_Days = 1; // The cookie will be available on revisits for a specified number of days
var f19_Cookie = 'My Form2'; // The Cookie name
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f19_Part2 (12-05-2005)
// Functional Code
// No Need To Change ***************************
var f19_TBAry = new Array();
var f19_RCAry = new Array();
var f19_TAAry = new Array();
var f19_SLAry = new Array();
var f19_TBString, f19_RCString, f19_TAString, f19_SLString;
var f19_, f19_exp, f19_st, f19_len, f19_end, f19_st;
var f19_Exp = new Date(new Date().getTime() + f19_Days * 86400000).toGMTString();
function f19_GetFormCookie() {
f19_TBString = f19_GetCookie(f19_Cookie + 'TB');
f19_RCString = f19_GetCookie(f19_Cookie + 'RC');
f19_SLString = f19_GetCookie(f19_Cookie + 'SL');
f19_TAString = f19_GetCookie(f19_Cookie + 'TA');
f19_ = document.getElementsByTagName('*');
for (f19_0 = 0; f19_0 < f19_.length; f19_0++) {
if (f19_[f19_0].title == 'f19_Include') {
f19_Inc = f19_[f19_0].getElementsByTagName('*');
for (f19_1 = 0; f19_1 < f19_Inc.length; f19_1++) {
if (f19_Inc[f19_1].tagName == 'INPUT') {
if (f19_Inc[f19_1].type == 'text') {
f19_TBAry[f19_TBAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].type == 'radio' || f19_Inc[f19_1].type == 'checkbox') {
f19_RCAry[f19_RCAry.length] = f19_Inc[f19_1];
}
}
if (f19_Inc[f19_1].tagName == 'TEXTAREA') {
f19_TAAry[f19_TAAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].tagName == 'SELECT') {
f19_SLAry[f19_SLAry.length] = f19_Inc[f19_1];
}
}
}
}
if (f19_TBString) {
for (f19_1 = 0; f19_1 < f19_TBAry.length; f19_1++) {
f19_TBAry[f19_1].value = f19_TBString.split('~^~')[f19_1];
}
}
if (f19_RCString) {
for (f19_2 = 0; f19_2 < f19_RCAry.length; f19_2++) {
f19_RCAry[f19_2].checked = false;
if (f19_RCString.split('~^~')[f19_2] == 'true') {
f19_RCAry[f19_2].checked = true;
}
}
}
if (f19_TAString) {
for (f19_3 = 0; f19_3 < f19_TAAry.length; f19_3++) {
f19_TAAry[f19_3].value = f19_TAString.split('~^~')[f19_3];
}
}
if (f19_SLString) {
for (f19_4 = 0; f19_4 < f19_SLAry.length; f19_4++) {
f19_SLAry[f19_4].selectedIndex = f19_SLString.split('~^~')[f19_4];
}
}
}
function f19_GetCookie(name) {
var f19_st = document.cookie.indexOf(name + "=");
var f19_len = f19_st + name.length + 1;
if ((!f19_st) && (name != document.cookie.substring(0, name.length))) return null;
if (f19_st == -1) return null;
var f19_end = document.cookie.indexOf(";", f19_len);
if (f19_end == -1) f19_end = document.cookie.length;
return decodeURI(document.cookie.substring(f19_len, f19_end));
}
function f19_SetFormCookie(value) {
f19_TBString = '';
for (f19_0 = 0; f19_0 < f19_TBAry.length; f19_0++) {
f19_TBString += f19_TBAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TB=" + encodeURI(f19_TBString) + ";expires=" + f19_Exp + ";path=/;"
f19_RCString = '';
for (f19_1 = 0; f19_1 < f19_RCAry.length; f19_1++) {
f19_RCString += f19_RCAry[f19_1].checked + '~^~';
}
document.cookie = f19_Cookie + "RC=" + encodeURI(f19_RCString) + ";expires=" + f19_Exp + ";path=/;"
f19_TAString = '';
for (f19_0 = 0; f19_0 < f19_TAAry.length; f19_0++) {
f19_TAString += f19_TAAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TA=" + encodeURI(f19_TAString) + ";expires=" + f19_Exp + ";path=/;"
f19_SLString = '';
for (f19_1 = 0; f19_1 < f19_SLAry.length; f19_1++) {
f19_SLString += f19_SLAry[f19_1].selectedIndex + '~^~';
}
document.cookie = f19_Cookie + "SL=" + encodeURI(f19_SLString) + ";expires=" + f19_Exp + ";path=/;"
}
//-->
</script>
</body>
</html>
You can use onclick event on radio buttons:
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php
You could modify your code to use Buttons instead RadioButtons.
It should resemble the following:
<button name="b1" onclick="f19_SetFormCookie('Baseball')">Baseball</button>
<button name="b2" onclick="f19_SetFormCookie('Basketball')">Basketball</button>
<button name="b3" onclick="f19_SetFormCookie('Soccer')">Soccer</button>
<button name="b4" onclick="f19_SetFormCookie('Fencing')">Fencing</button>
Then you'll have to modify SetFormCookie function to accept the argument - based on which cookie will be set.

Compare and Output 2 strings in JavaScript

I am new to JavaScript, and I'm trying to make a web page where if I have the same open and closing hours for 5 days a week, it will output them on the same line. For example, the hours for Monday - Friday are the same in my example so it would print out:
Monday - Friday: 6:00AM - 2:00PM
Saturday 8:00AM - 1:00PM
Sunday Closed (Without the hyphen)
When I run this in my browser, I get a blank page. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script>
var MondayOpen = "6:00AM - ";
var MondayClose = "2:00PM";
var TuesdayOpen = "6:00AM - ";
var TuesdayClose = "2:00PM";
var WednesdayOpen = "6:00AM - ";
var WednesdayClose = "2:00PM";
var ThursdayOpen = "6:00AM - ";
var ThursdayClose = "2:00PM";
var FridayOpen = "6:00AM - ";
var FridayClose = "2:00PM";
var SaturdayOpen = "8:00AM - ";
var SaturdayClose = "1:00PM";
var SundayOpen = "Closed";
var SundayClose = "";
var dateArray = new Array(MondayOpen, MondayClose, TuesdayOpen, TuesdayClose, WednesdayOpen, WednesdayClose, ThursdayOpen, ThursdayClose,FridayOpen, FridayClose, SaturdayOpen, SaturdayClose, SundayOpen, SundayClose);
function outputDate(){
for(int i = 0; i<dateArray.length; i++){
var current;
//Puts Open and Close time into 1 string
dateArray[i] + dateArray[i+1] = current;
//Compare the two strings
if(current.substring(0,15) == current.substring(0,15) +2)
}
$("#hours").html(<b> current <b/>);
}
var getHours = document.getElementById('hours').innterHTML = current;
}
</script>
<div id= "hours" style="font-size:10px; color:#fff;">
</div>
What am I missing here? Any help would be appreciated.
There are several mistakes here. Just to name a few:
You put int instead of var here:
for(var i = 0; i<dateArray.length; i++){
You put String instead of var here:
var curr;
You're assigning a variable to an expression? Did you mean to do it the other way around?
//Puts Open and Close time into 1 string
curr = dateArray[i] + dateArray[i+1];
You have a closing brace after your if statement...
//Compare the two strings
if(current.substring(0,15) == current.substring(0,15) +2)
{
You type innterHTML instead of innerHTML and try to do multiple assignments:
var getHours = current;
document.getElementById('hours').innerHTML = current;
You forget to enclose this in quotes:
$("#hours").html("<b> current <b/>");
EVEN after fixing all these syntax errors I get a blank page. Consider rewriting it from scratch.
In Javascript you don't need to declare String theString = "This is a string".
Just write var stringName = "This is my string."
You might want to take a step back and master JavaScript and HTML. There are many free resources available. Just to be brief, why not try Code Academy or W3 schools. That being said, here's enough of a fix to display your variables.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<div id="hours"></div>
</body>
<script type="text/javascript">
var MondayOpen = "6:00AM - ";
var MondayClose = "2:00PM";
var TuesdayOpen = "6:00AM - ";
var TuesdayClose = "2:00PM";
var WednesdayOpen = "6:00AM - ";
var WednesdayClose = "2:00PM";
var ThursdayOpen = "6:00AM - ";
var ThursdayClose = "2:00PM";
var FridayOpen = "6:00AM - ";
var FridayClose = "2:00PM";
var SaturdayOpen = "8:00AM - ";
var SaturdayClose = "1:00PM";
var SundayOpen = "Closed";
var SundayClose = "";
var dateArray = new Array(MondayOpen, MondayClose, TuesdayOpen, TuesdayClose, WednesdayOpen, WednesdayClose, ThursdayOpen, ThursdayClose,FridayOpen, FridayClose, SaturdayOpen, SaturdayClose, SundayOpen, SundayClose);
function outputDate(){
var printOutResults;
for(i = 0; i<dateArray.length; i++) {
var current;
//Puts Open and Close time into 1 string
current = dateArray[i] + dateArray[i+1];
printOutResults += current;
//Compare the two
if(current.substring(0,15) == current.substring(0,15) +2){
$("#hours").html(current);
}
}
$("#hours").html(printOutResults);
}
outputDate();
</script>

Categories