Using jQuery to add an item reference if a condition is true

Question

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 managed to correctly change the image after determining the time ( d ), open time and close time. However, I am having problems assigning a link to buttons based on the time of day.

This code correctly applies the class if the time is between open and close . It also correctly applies the reference to the ButtonOne div only when the ManagersChatButtonActive class is applied, in the JSFiddle. However, in SharePoint it would be, the link also applies even when the time condition is not met.

How can I get a link for use only when the if condition is true?

(This is my first time stack overflow, so I apologize 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"); } }); 

Answer 1

Make sure you end your method in jQuery syntax for the document when ready or when loading 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 may also make sense to use getTime () to use a UNIX timestamp, which is a number, not 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"); } }) 

Answer 2

Remember to get the current time using the getHours or getTime method. You want this to compare with your condition. These values ​​do not have to be in time format, you can also 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!

Answer 3

I checked your code in a browser using jQuery, but I don’t know about SharePoint, so I assume that if you just embed your code that works fine with jQuery in .ready (), so when the document is ready only then, the code starts when the ".ButtonOne" element is initialized to 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>