-1

I have two nav-pills that I need to hide until a certain time of the day and then hide again at a later time of the same day. However there is a third nav-pill which shouldn´t be affected by this and visible at all times.

function showNavPill() {

let now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();

if (date > 15.30 && date < 17.15) {
nav-pill.show = true;
} else {
nav-pill.show = false;
}
}

showNavPill();

I´m quite new to this so not sure if this makes any sense?

MonWas
  • 1
  • 1
  • Please refer to the JavaScript tutorial: https://www.javascripttutorial.net/javascript-dom/ for the basics – loa_in_ Aug 19 '21 at 11:36
  • MonWas there's not enough context to your question here to give you an answer. The question has a ton of answers and there are lots of solutions you can find with a search. YOu can solve it by adding/removing classes to the specific buttons, you could target the specific element and change the styles. Are you using a framework to render your page or just basic html and js? So try and be specific with the question and provide as much details as you can to get an answer. – Jessy Aug 19 '21 at 11:40

1 Answers1

0

In your example you compare a undefined variable date with two float values 15.30 and 17.15. So let us define date and we will have a chance to get it working.

I simply added const date = hours + (minutes / 100); to convert hours and minutes into a float value that may match your conditions.

function showNavPill() {

    let now = new Date();
    let hours = now.getHours();
    let minutes = now.getMinutes();

    const date = hours + (minutes / 100);

    if (date > 15.30 && date < 17.15) {
        nav-pill.show = true;
    } else {
        nav-pill.show = false;
    }
}

showNavPill();

As a result nav-pill.show will be true between 15:31:00 and 17:14:59 (local time!) of your visitor.

But please make yourself aware that nav-pill is not a valid name for a variable in javascript!

steven
  • 4,868
  • 2
  • 28
  • 58