Show Button(s) only at a specific date-CodePudding

Good day everyone,

I wanted to develop an advent Calendar webpage, where the doors (1-24) only appear on the designated days. For example: On december 1st, there should only be one door visible On december 15th, there should be doors 1-15 visible, so that every day another door appears.

I already figured out how to compare the dates to only trigger if it's a match:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script src="test.js"></script>
</head>
<body>
    <button id="btn">Hello</button>
</body>
</html>

JS:

            var today = new Date();
    var date =  new Date('2022-10-20');
    today.setHours(0,0,0,0);
    date.setHours(0,0,0,0);

    if ( today ==  date) {
        console.log("These are the same dates");
        $("#btn").hide();
    } else {
        console.log("These are different dates");
    }
    console.log(today);
    console.log(date);

Which returns this in console if it matches:

And this if it does not match:

The problem here is, I can't make anything appear, change visibility or enable something. I tried this: document.getElementById("id").style.visibility = 'visible';, didn't work. Also made a button with the disabled attribute and tried this: button.disabled = false;, did not work also. I thought it had something to do with the if-statement, but it doesn't even work outside of it.

Can someone help me? Thank you guys very much!

Greetings Marcel

CodePudding user response：

I strongly recommend you to use JQuery. In JQuery it's as simple as $(selector).hide() or $(selector).attr('display', 'none'). For example: $("#myBtn").hide().

Just don't forget to put <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> in your <head></head>!

CodePudding user response：

I think you can do that simply using JavaScript.

To hide the button

document.getElementById("id").style.display = 'none'

in your code

document.getElementById("btn").style.display = 'none'

To show the button

document.getElementById("id").style.display = 'block'

in your code

document.getElementById("btn").style.display = 'block'

CodePudding user response：

Hide is a jquery funtion to use it you must import jquery and use @xorozo answer Try to move the script just before the close of body tag

CodePudding user response：

Since you have the first date to open the first door, then you can calculate from there and open doors according to the days since the first day. here is a rework and complete example to clarify that:

var today = new Date();
var firstDay =  new Date('2022/10/25');

today.setHours(0,0,0,0);
firstDay.setHours(0,0,0,0);

let difTime = firstDay.getTime() - today.getTime();

let difDays = difTime  / (1000 * 3600 * 24); // diferent days between the dates

// represent doors
let doors = document.getElementById("container").children;
// array of doors
let allDoors = [...doors];

for (let i = 0; i < difDays; i  ) {
    allDoors[i].style.background = "green";  
 }

console.log(difDays);

#door {
    padding: 20px 10px;
    background: darkgray;
    border: 1px solid;
    width: 20px;
}

<div id="container">
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
  <div id="door"></div>
</div>