I'm still newbie and trying to make a simple website, one of my feature is calendar.
why is my function nextbutton() is not running?
I also need some critics where and what should i change in coding. thank you so much!
function calendar(){
date = new Date();
month = date.getMonth();
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
month = month++;
}
}
<div id="calendar"></div>
<script language="JavaScript">
var month=-1;
function calendar(){
date = new Date();
if(month===-1){
month =date.getMonth();
}
year = date.getFullYear();
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month+1;
var prevMonth = month-1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= nameOftheDays.length-1; count++){
content += "<td>" + nameOftheDays[count] + "</td>";
if(count === nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton(){
if(month != null){
document.getElementById("calendar").innerHTML ="";
month++;
calendar()
}
}
</script>
Try this out. I pulled the vars out of the calendar() function, and set your nextButton() function (which works, by the way, just do a console.log to see) to call the calendar function every time. Also, to increment, just do var++
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
function calendar(month) {
var dayOfweek = date.getDay();
var day = date.getDate();
var nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
var nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
var nextMonth = month + 1;
var prevMonth = month - 1;
var numberOfDays = new Date(year, month, 1).getDay();
var TotalNumOfDays = new Date(year, month + 1, 0).getDate();
var num2 = numberOfDays + 1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + nameOftheMonth[month] + " " + year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count = 0; count <= nameOftheDays.length - 1; count++) {
content += "<td>" + nameOftheDays[count] + "</td>";
if (count === nameOftheDays.length - 1) {
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays) {
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[0].setAttribute("onclick", "prevButton()");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[1].setAttribute("onclick", "nextButton()");
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
function nextButton() {
if (month != null) {
console.log(month);
month++;
calendar(month);
}
}
<body onload="calendar(month)">
<div id="calendar">
</div>
<div id="today">
</div>
</body>
nextButton click is not working because it is a dynamically created element.
So we need to attach the click listeners on newly created DOM elements using, addEventListener.
document.getElementsByTagName("button")[1].addEventListener('click', yourFunction);
I have used simple JS prototyping to modify the code slightly, this way you can add more methods to your calendar and have multiple instances of it.
function Calendar(month,date,year) {
this.month = month, this.date = date, this.year = year;
this.nameOftheMonth = ["JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER"];
this.nameOftheDays = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
}
Calendar.prototype.init = function() {
this.date = new Date();
this.month = this.date.getMonth();
this.year = this.date.getFullYear();
this.render();
}
Calendar.prototype.render = function() {
var dayOfweek = this.date.getDay();
var day = this.date.getDate();
var nextMonth = this.month+1;
var prevMonth = this.month-1;
var numberOfDays = new Date(this.year, this.month, 1).getDay();
var TotalNumOfDays = new Date(this.year, this.month+1, 0).getDate();
var num2 = numberOfDays+1;
var num = 1;
var content = "";
content += "<button><----</button><div>" + this.nameOftheMonth[this.month] + " " + this.year + "</div><button>----></button>";
content += "<br/><table><tr>";
for (count=0;count <= this.nameOftheDays.length-1; count++){
content += "<td>" + this.nameOftheDays[count] + "</td>";
if(count === this.nameOftheDays.length-1){
content += "</tr><tr>";
}
}
while (numberOfDays > 0) {
content += "<td></td>";
numberOfDays--;
}
while (num <= TotalNumOfDays){
content += "<td>" + num + "</td>";
if (num2 > 6) {
num2 = 0;
content += "</tr><tr>"
}
num2++;
num++;
}
document.getElementById("calendar").innerHTML = content;
document.getElementsByTagName("button")[0].setAttribute("id", "prevbutton");
document.getElementsByTagName("button")[1].setAttribute("id", "nextButton");
document.getElementsByTagName("button")[0].addEventListener('click', (function() {
this.prevButton();
}).bind(this));
document.getElementsByTagName("button")[1].addEventListener('click', (function() {
this.nextButton();
}).bind(this));
document.getElementsByTagName("div")[1].setAttribute("id", "dateToday");
}
Calendar.prototype.nextButton = function(){
if(this.month !== null){
this.month += 1;
this.render();
}
}
Calendar.prototype.prevButton = function(){
if(this.month !== null){
this.month -= 1;
this.render();
}
}
var c =new Calendar();
c.init();
<div id="calendar">
</div>
This is the current code I'm using for my clock (from a tutorial), and I'm wondering if there is a way to make the time appear above the date?
function renderTime(){
// Date
var mydate = new Date();
var year = mydate.getYear();
if(year < 1000){
year +=1900;
}
var day = mydate.getDay();
var month = mydate.getMonth();
var daym = mydate.getDate();
var dayarray = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var montharray = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
// Date End
// Time
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if( h == 24){
h = 0;
}
else if(h > 12){
h = h - 0;
}
// adding 0 infront of single digit values
if(h < 10){
h = "0" + h;
}
if(m < 10){
m = "0" + m;
}
if(s < 10){
s = "0" + s;
}
var myClock = document.getElementById("clockDisplay");
myClock.textContent = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
myClock.innerText = "" +dayarray[day]+ " " +montharray[month] + " " +daym+ " " +h+ ":" +m+ ":" +s;
setTimeout("renderTime()", 1000);
// Time End
}
renderTime();
I'm not sure about what .textContent and .innerText does myself - I'm a beginner. HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body onLoad="renderTime()">
<div id="clockDisplay" class="container"></div>
</body>
<html>
CSS:
.container {
font-family: verdana;
font-weight: normal;
color: #000000;
text-align: right;
font-size: 20px;
}
Ok so I have a javascript for the current time and date. The time however is list as 7 hours ahead. How do I fix that? When you see the working website it should display a message as well as the current time and the date. However, the hour is off by about 7 hours ahead. The date and message matches the display time but it is not current. I do not understand hoe to fix it.
<script type="text/javascript">
/* <![CDATA[ */
var dateObject = new Date();
var greeting = " ";
var curTime = " ";
var minuteValue = dateObject.getMinutes();
var hourValue = dateObject.getHours();
if (minuteValue < 10)
minuteValue = "0" + minuteValue;
if (hourValue < 12) {
greeting = "<p> Good morning! "
curTime = hourValue + ":" + minuteValue + " AM ";
}
else if (hourValue == 12) {
greeting = "<p> Good afternoon! ";
curTime = hourValue + ":" + minuteValue + " PM ";
}
else if (hourValue < 17) {
greeting = "<p> Good afternoon! "
curTime = (hourValue-12) + ":" + minuteValue + " PM "
}
else {
greeting = "<p>Good evening! "
curTime = (hourValue-12) + ":" + minuteValue + " PM "
}
var dayArray = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var monthArray = new Array("January", "February",
"March", "April", "May", "June", "July", "August",
"September", "October", "November", "December");
var day = dateObject.getDay();
var month = dateObject.getMonth();
document.write("<p>" + greeting + " It is " + curTime
+ " on " + dayArray[day] + "," + monthArray[month]
+ "" + dateObject.getDate() + "," + dateObject.getFullYear()
+ ".</p>");
I have the following code for showing date/time stamp on my site:
<div id="clockbox" style="<font-size:9pt; padding:3px; text-align: center; text-transform: lowercase; overflow: hidden; height: 17px">
</div>
<script type="text/javascript">
tday =new Array("Nedelja","Ponedeljak","Utorak","Sreda","Četvrtak","Petak","Subota");
tmonth=new Array("Januar","Februar","Mart","April","Maj","Jun","Jul","Avgust","Septembar","Oktobar","Novembar","Decembar");
function GetClock(){
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();
if(nyear<1000) nyear=nyear+1900;
if(nhour == 0) {ap = " AM";nhour = 12;}
else if(nhour <= 11) {ap = " AM";}
else if(nhour == 12) {ap = " PM";}
else if(nhour >= 13) {ap = " PM";nhour -= 12;}
if(nmin <= 9) {nmin = "0" +nmin;}
if(nsec <= 9) {nsec = "0" +nsec;}
document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+ndate+". "+tmonth[nmonth]+" "+nyear+". "+nhour+":"+nmin+":"+nsec+ap+"";
setTimeout("GetClock()", 1000);
}
window.onload=GetClock;
</script>
It is showing nicely on all pages unless I have following lines on the same page:
<div class="clickdesk-widget">
<script type='text/javascript'>
var _glc =_glc || [];
_glc.push('<?php echo $widgetid; ?>');
var glcpath = (('https:' == document.location.protocol) ? 'https://contactuswidget.appspot.com/livily/browser/' : 'http://gae.clickdesk.com/livily/browser/');
var glcp = (('https:' == document.location.protocol) ? 'https://' : 'http://');
var glcspt = document.createElement('script'); glcspt.type = 'text/javascript'; glcspt.async = true;glcspt.src = glcpath + 'livechat.js';
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(glcspt, s);
</script>
</div>
What is the problem there, can anybody help?
You are declaring a global variables d, nday, etc. here:
d = new Date();
nday = d.getDay();
nmonth = d.getMonth();
ndate = d.getDate();
nyear = d.getYear();
nhour = d.getHours();
nmin = d.getMinutes();
nsec = d.getSeconds();
try declare local variables instead (I guess that d variable is the root of your problenm because obfuscated code uses variable names like this) this way:
var d = new Date();
var nday = d.getDay();
var nmonth = d.getMonth();
var ndate = d.getDate();
var nyear = d.getYear();
var nhour = d.getHours();
var nmin = d.getMinutes();
var nsec = d.getSeconds();
If it is online, send a link.
Is it possible to get it through javascript?
You can get the current time from the web server, from the local machine, or by calling a web service. While that last choice is possible, it would be the slowest and least performant.
<script type="text/javascript">
var d_names = new Array("Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday");
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_day = d.getDay();
var curr_date = d.getDate();
var sup = "";
if (curr_date == 1 || curr_date == 21 || curr_date ==31)
{
sup = "st";
}
else if (curr_date == 2 || curr_date == 22)
{
sup = "nd";
}
else if (curr_date == 3 || curr_date == 23)
{
sup = "rd";
}
else
{
sup = "th";
}
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
console.log(d_names[curr_day] + " " + curr_date + "<SUP>"
+ sup + "</SUP> " + m_names[curr_month] + " " + curr_year);
</script>
This is how you get the values through javascript. Not sure what you mean by without using system time
From http://www.webdevelopersnotes.com/tips/html/formatting_time_using_javascript.php3
<script type="text/javascript">
<!--
var a_p = "";
var d = new Date();
var curr_hour = d.getHours();
if (curr_hour < 12)
{
a_p = "AM";
}
else
{
a_p = "PM";
}
if (curr_hour == 0)
{
curr_hour = 12;
}
if (curr_hour > 12)
{
curr_hour = curr_hour - 12;
}
var curr_min = d.getMinutes();
document.write(curr_hour + " : " + curr_min + " " + a_p);
//-->
</script>