I'm trying to figure out how to onClick a buttom so that it automatically figures what day the machine is in and find the website according to it (e.g. if it is Sunday, it will find Sunday.html)
Being a beginner at HTML, CSS and Javascript, I got the code from w3schools and changed the output to just .html - obviously, it didn't work. I was wondering is there any simple way of correcting this?
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var d = new Date();
var weekday=new Array(7);
weekday[0]="Sunday.html";
weekday[1]="Monday.html";
weekday[2]="Tuesday.html";
weekday[3]="Wednesday.html";
weekday[4]="Thursday.html";
weekday[5]="Friday.html";
weekday[6]="Saturday.html";
var x = document.getElementById("demo");
x.innerHTML=weekday[d.getDay()];
}
</script>
I've also did another way through using if statement,
if (currentDay == 6)
{
window.location = 'saturday.html';
}
}
else if (currentDay == 0)
{
window.location = 'sunday.html';
}
etc.
Again, it doesn't seem to work. Is there simple way of doing this?
Thanks in advance
The second method of doing window.location to the url is correct.
I did minor modification to your code. Please try the fiddle (http://jsfiddle.net/QK2TL/1/).
Open the debug console to see the messages.
var d = new Date();
var loc = weekday[d.getDay()];
alert("about to navigate to " + weekday[d.getDay()]);
window.location = loc;
function myFunction()
{
var d = new Date();
var weekday=[];
weekday[0]="Sunday.html";
weekday[1]="Monday.html";
weekday[2]="Tuesday.html";
weekday[3]="Wednesday.html";
weekday[4]="Thursday.html";
weekday[5]="Friday.html";
weekday[6]="Saturday.html";
return weekday[d.getDay()];
}
window.location = myFunction();
Related
The following script open correctly a link with a formatted date when i click the button on my html page.
$(document).ready(function() {
$('#button').click(function(e) {
var date = /*my script that collects a specific date*/ ;
var [yyyy, mm, dd] = date.toISOString().split('T')[0].split('-');
document.getElementById("cid").innerHTML = dd;
document.getElementById("cim").innerHTML = mm;
window.open( "https://www.mywebsite.com/" +yyyy );
});
the problem : I can't display into the html page the data from the variables.
I'm using this code :
Date values : <span id="cid"></span> / <span id="cim"></span>
Is it Maybe because the script is triggered only when i click the #button ? In any case I would like to display the values on the page before the button is clicked.
How can i do this ? thanks
Maybe I dont understand what ypou want to achieve but for me everything works good when you move your logic outside click function.
function updateDate(){
console.log('Updated!')
const date = new Date();
const [yyyy, mm, dd] = date.toISOString().split('T')[0].split('-');
document.getElementById("cid").innerHTML = dd;
document.getElementById("cim").innerHTML = mm;
}
$(document).ready(function() {
updateDate();
$('#button').click(function(e) {
updateDate();
});
})
Look on fiddle: https://jsfiddle.net/aofd5vne/1/
I'm not able to make the right logic for a simple vanilla javascript alarm clock, that shows a message/plays a sound at the time which user had set... help me make the logic right.
Here's my javascript code:
<script>
function setAlarm(){
//taking value of time
var a=document.getElementById("H").value;
var b=a*3600000;//converted to millisecound
var c=document.getElementById("M").value;
var d=c*60000;//converted to millisecound
var e=d+b;//addition of millisecound
//live values of time
var f=h*3600000;//converted to millisecound
var g=m*60000;//converted to millisecound
var i=g+h;//addition of millisecound
var j=0;
if(i>=e){
j=i-e;
}else{
j=e-i;
}//else
document.getElementById("demo2").innerHTML=j;
setInterval(test,j);
if (d==g){
console.log("if called");
test();
}//if
}
function test(){
console.log("test called")
document.getElementById("demo2").innerHTML="its work";
}
var d=new Date();
var h=d.getHours();
document.getElementById("hours").innerHTML=h;
var m=d.getMinutes();
document.getElementById("minutes").innerHTML=m;
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
setInterval(repeat,1000);
function repeat(){
var d=new Date();
var h=d.getHours();
document.getElementById("hours").innerHTML=h;
var m=d.getMinutes();
document.getElementById("minutes").innerHTML=m;
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
}
var i=0;
function ChangeTheam(){
i++;
if(i%2){
document.body.style.backgroundColor= "black";
document.getElementById("hours").innerHTML.style.color = "blue";
}else{
document.body.style.backgroundColor= "white";
}//else
}//change theam function
</script>
I can provide HTML code if someone wants but don't think that'll be necessary since I'm not able to make the logic right at the first point.
Thanks :)
In your code
//live values of time
var f=h*3600000;//converted to millisecound
var g=m*60000;//converted to millisecound
var i=g+h;//addition of millisecound`
You added g+h instead of g+f as a result the time that your alarm takes to trigger may be significantly shorter.
var s=d.getSeconds();
document.getElementById("secound").innerHTML=s;
I am not sure if this is just what you id'd the element by I assume you meant 'second' not 'secound'
Otherwise, I see no problems with your code and should work fine.
I'm trying to write a script that will allow me to redirect to a web page every Friday at a specific time.
Was hoping to have the script redirect to an Iframe for a live video feed, and after an hour, have the script also redirect to a html file that will be stored on the pc running a splash page till the next feed the following week, which will start the script again based on day and time.
Been trying for the past 3 hours to salvage something from scripts I've found on stack overflow with no success. Would GREATLY appreciate some help on this!
I Hope this will works for You.
function myFunction() {
var d = new Date();
var n = d.getDay()
var time=.getHours()
if(n==5)
{
//based on time
if(time==14)
{
window.location.href="www.YourRedirectpage.com";
}
}
This should work (ES5 syntax):
Date.prototype.hour = function () {return (this.getHours())}
Date.prototype.day = function () {return (this.getDay())}
var today = new Date()
if (today.hour() == "10" && today.day() == "6") {
// change you url here, such as; location.href ="friday url";
}
else {
// keep (or re-attribute) your base url, such as; location.href ="base url";
}
I guess you want some kind of simplified job in UI which will keep watching and do redirect for you and you don't need to manually intervene much. You should use a setTimeout from Javascript to achieve this.
What this solution does that it calculates the millisecond difference between coming Friday with specific time till current date time and starts a timeout event.
Hope this is easy to understands and helps you.
GIT Repo: https://github.com/helloritesh000/how-to-redirect-browser-at-specific-date-and-time
<!DOCTYPE html>
<html>
<body onload="RedirectTo(5, 15, 49, 30);"> <!-- RedirectTo(day(1-7(Monday)-(Sunday)),1-24 hour,1-60 min,1-60 sec) -->
<h1>This will reload redirect page</h1>
# - <p id="demo"></p>
<script>
function getNextDayOfWeek(date, dayOfWeek) {
// Code to check that date and dayOfWeek are valid left as an exercise ;)
var resultDate = new Date(date.getTime());
resultDate.setDate(date.getDate() + (7 + dayOfWeek - date.getDay()) % 7);
return resultDate;
}
function RedirectTo(day, hour, min, sec) {
var d = new Date(getNextDayOfWeek(new Date(), day));
d.setHours(hour);
d.setMinutes(min);
d.setSeconds(sec);
document.getElementById("demo").innerHTML = d;
var totalMilliSecDiff = d-new Date();
if(totalMilliSecDiff > 0)
{
setTimeout(function(){ window.location.href = "http://www.google.com"; }, totalMilliSecDiff);
}
}
</script>
</body>
</html>
I am very new to HTML, CSS and JavaScript. I am trying to use jQuery to make a button active or inactive depending on the time of day. I have managed to get the image to change correctly after defining the time now (d), an open time and a close time. However I am having problems assigning a link to the buttons depending on the time of day.
This code correctly applies a class if the time is between open and close. It also correctly applies the link to the ButtonOne div, only when the ManagersChatButtonActive class is applied, in a JSFiddle. However in SharePoint, were this will be, the link is also applied even when the time condition is not met.
How can I get the link to only be applied when the 'if' condition is met?
(This is my first time on Stack Overflow, so apologies if this is not very well laid out or explained).
$(document).ready(function() {
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
Make sure you wrap your method in the JQuery syntax for document on ready or on load as follows:
$(function(){
var d = new Date()
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
https://jsfiddle.net/aaronfranco/3xwhoh10/1/
It might also make more sense to use getTime() to use a UNIX timestamp, which is a number, instead of a date string.
$(function(){
var d = new Date().getTime();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
open = open.getTime()
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
close = close.getTime()
if (d >= open && d < close) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
})
Don't forget to get the current time with the getHours or getTime method. You want this to compare to your condition. These values do not have to be in a time-format, it also possible to just use some static numbers.
You can just do something like this:
var time = new Date(),
hours = time.getHours();
if (hours >= 9 && hours < 18) {
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
Working example: https://jsfiddle.net/crix/7o4uhLxe/
Hope this helps!
I checked your code in browser with jQuery, but I don't know about SharePoint, so I guess if you just enclose your code which works fine with jQuery, in .ready() so that when document is ready only then your code is run and when the ".ButtonOne" element is initialized in dom:
$(document).ready(function(){
var d = new Date();
var open = new Date();
open.setHours(9);
open.setMinutes(0);
open.setSeconds(0);
console.info(d);
console.log(open);
var close = new Date();
close.setHours(18);
close.setMinutes(0);
close.setSeconds(0);
console.log(close);
if (d >= open && d < close) {
console.info("INSIDE");
$(".ButtonOne").addClass("ManagersChatButtonActive");
$(".ButtonOne").wrap('<a href="http://www.google.com"/>');
} else {
console.info("INSIDE ELSE");
$(".ButtonOne").addClass("ManagersChatButtonInactive");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ButtonOne" >
This is the desired ButtonOne Div
</div>
I have the below code:
<HTML>
<HEAD>
<SCRIPT>
function myFunction(atlasTrackingURL)
{
var atlasURL = atlasTrackingURL;
if (!atlasURL) return;
//Build a cache busting mechanism
var timestamp = new Date();
var queryString = "?random=" + Math.ceil(Math.random() * 999999999999) +
timestamp.getUTCHours() + timestamp.getUTCMinutes() +
timestamp.getUTCSeconds();
//Build the final URL
atlasURL = atlasURL + queryString;
if (!document.getElementsByTagName || !document.createElement
|| !document.appendChild)
{return false;}
else
{ //Activate the JACTION call
var script = document.createElement("script");
script.type = "text/javascript";
script.src = atlasURL;
document.getElementsByTagName("head")[0].appendChild(script);
return true;
}
}
</SCRIPT>
</HEAD>
<BODY>
Test - Click Me
</BODY>
</HTML>
It works in Internet Explorer every time, but rarely works in Chrome and Firefox. Why would this be?
Can these browsers not handle a function onClick very well? Are there any other options I can take?
I am trying to help a client figure out why one of their tracking tags are not firing off all the time on click in these browsers.
Thanks,
You've got some kind of browser-dependent race condition going on, as Musa pointed out.
Try hiding the link initially, waiting for the document to load, and then adding the onclick attribute and revealing the link with javascript.
So, for example, change the link HTML to something like:
<a id="microsoft-link" href="http://www.microsoft.com" style="display: none;">Test - Click Me</a>
And add in your javascript, below the myFunction(), something like:
document.addEventListener('DOMContentLoaded', function(){
var link_elem = document.getElementById("microsoft-link");
link_elem.onclick = function() {
myFunction('http://view.atdmt.com/jaction/adoakb_PiggybackJSTest_1');
};
link_elem.style.display = 'inherit';
});
jsfiddle -- http://jsfiddle.net/m8VTy/3/
edit: I realized I may be misinterpreting what you're trying to do. What exactly is myFunction() supposed to accomplish ?