CODEWITHSUNDEEP
javascripthtml
Marcii
Marcii

Reputation: 39

Show Button(s) only at a specific date

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:

enter image description here

And this if it does not match:

enter image description here

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

Upvotes: 0

Views: 515

Answers (4)

Mad7Dragon
Mad7Dragon

Reputation: 1313

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>

Upvotes: 1

TLEMCANI Abdelkadir
TLEMCANI Abdelkadir

Reputation: 324

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

Upvotes: 0

BlueChip
BlueChip

Reputation: 774

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'

Upvotes: 0

Attila G&#225;l
Attila G&#225;l

Reputation: 21

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>!

Upvotes: 1

Related Questions