Activating style.display based on the date

Hello everyone! I'm new here so please bear with me if I make any mistakes. Can someone take a look and tell me what I'm doing wrong?

I've created divs named "1st", "2nd", "3rd," etc., with the intention of setting up an advent calendar layout where the content of each day's div becomes visible only on that specific date.

In the test case below, I've used dates ranging from the 6th to the 8th, but unfortunately, the divs remain visible at all times.

Since I'm still learning JavaScript, I would really appreciate any assistance!


<script type = "text/javascript">

function myFunction() {

var num = new Date().getDate(); //current date as a number

if ((num <= 6)) {
    document.getElementById('6th').style.display = "none";
}
if ((num <= 7)) {
    document.getElementById('7th').style.display = "none";
}
if ((num <= 8)) {
    document.getElementById('8th').style.display = "none";
}

}

</script>

<div id="6th">
    6th
        </div>

<div id="7th">
    7th
        </div>

<div id="8th">
    8th
        </div>
javascriptcssfunctionif-statementmath

Answer №1

<!DOCTYPE html>
<html>
<body>
<script type = "text/javascript">

    function updateDate() {

    var dayNum = new Date().getDate(); //get today's date in number form

    if ((dayNum <= 6)) {
        document.getElementById('6th').style.display = "none";
    }
    if ((dayNum <= 7)) {
        document.getElementById('7th').style.display = "none";
    }
    if ((dayNum <= 8)) {
        document.getElementById('8th').style.display = "none";
    }

    }

</script>

<div id="6th">
    6th
        </div>

<div id="7th">
    7th
        </div>

<div id="8th">
    8th
        </div>

<div id="9th">
    9th
        </div>
<script>updateDate()</script>
</body>
</html>

Answer №2

Ensuring the effectiveness of the display: none code is crucial. Initially, verify that your myFunction is getting triggered by adding myFunction() before closing the script tag. Also, replace <= with < for accuracy. Additionally, consider inserting console.log statements within each if statement to track the execution flow.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve data from multiple tables using knex.js

I am trying to use Express.js and knex.js to render data from two tables using only one GET function. I have successfully queried each table individually (schools or students), but I am unsure how to query both at the same time. Any ideas? app.get('/ ...

javascriptmysqlnode.jsexpressknex.js

Should you hold off on moving forward until the asynchronous task finishes?

My goal is to retrieve location coordinates using the Google Maps JavaScript API in an asynchronous manner. Below is the function I've created for this purpose: function fetchCoordinates(address) { var geocoder = new google.maps.Geocoder(); ...

javascriptajaxasynchronous

What is the relationship between JavaScript node modules and vanilla script references within the browser environment?

When using the modular javascript approach with Node.JS + npm and browserify, how do you handle situations where you need to use javascript libraries that are not available on npm? Some of these libraries may not be compatible with modularity (amd/commonJs ...

javascriptnode.jsknockout.jsnpmbrowserify

Why is the footer appearing in the sidebar section?

I have a question that I believe may be common and already answered, but I can't seem to find the solution. codepen Currently, I am working on creating a simple 2 column layout. While the columns are displaying correctly, the footer ends up in the s ...

htmlcss

Examining a React component through unit testing using Jest and Enzyme

I am currently conducting unit tests on a React component. One component is importing another and utilizing its props. Below are the JSX files: class First extends React.PureComponent { render() { const { name, isSelected, onClick } = this.pro ...

javascriptreactjsenzymejestjs

What steps should I take to address the error message I received from React Developer Tools while viewing the standard React page?

Issue with React Developer Tools I am encountering a problem where the React Developer Tools in Google Chrome are not working properly. When I try to inspect elements on my React app, I receive an error message within the browser. Error Message: The pag ...

javascriptreactjsgoogle-chromenpm

What methods can be used to maintain the selected date when the month or year is changed in the react-datepicker component of reactjs?

At the moment, I am using the Month selector and Year selector for Date of Birth in the react-datepicker component within a guest details form. The current functionality is such that the selected date is highlighted on the calendar, which works fine. How ...

javascriptreactjsecmascript-6react-datepicker

What is the best way to retrieve specific feature properties in Open Layers 3 on-the-fly?

Within my map, I have two types: Point and Polygon, each with unique properties such as id, door number, and name. I have generated a list of features as follows: var features = new ol.format.GeoJSON().readFeatures(geojsonObject, { featureProjection: & ...

javascriptjqueryopenlayers-3

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

htmlcssbootstrap-4

Is there a way to get rid of those pesky red lines that appear when declaring variables in a .scss file in VS

Encountering red lines when defining variables in a .scss file using VS Code. The error message reads as follows: I have attempted various settings configurations in VS Code, but none seem to resolve the issue. Any suggestions for fixing this problem? ...

htmlcssvisual-studio-codesassscss-lint

Analyze data visualization selections with React on click functionality

Currently, I have implemented a highcharts column chart within my react application and now I am looking to include an onClick event for the chart. Essentially, when a user clicks on a column, my objective is to extract the X and Y axis values and then tri ...

javascriptreactjshighchartsonclickreact-highcharts

Object property accessed using Javascript array syntax

Could you explain the inner workings of this process: https://learn.jquery.com/using-jquery-core/faq/how-do-i-pull-a-native-dom-element-from-a-jquery-object/ How does JQuery configure foo[0] to trigger the get function? Upon inspecting the source code, I ...

javascriptjquery

Encountering an issue with react-select and formik: "Attempting to read property 'type' of undefined"

I'm currently developing a form that includes an auto-filling textbox feature using react-select and formik. <Formik initialValues={{ assignedTo: task.assignedTo, }} onSubmit={(values) => { const updatedTask = { ...t ...

javascriptreactjsreact-selectreact-componentformik

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

A guide to accessing a provider instance manually from outside the Nest.js framework

I am currently transitioning my Express.js application to Nest.js, where some modules are already using Nest.js while others are not. For example, I have an OrderModule in Nest.js with an OrderService within its providers. Now I want to use the OrderServi ...

javascriptnode.jsexpressnestjs

ReactJS not responding to Bootstrap toggler button

My Bootstrap toggler button is not working in ReactJS. I did not include the jQuery scripts because I imported Bootstrap at the top. The button should only appear and function on small devices. import React from 'react'; import 'bootstrap/d ...

javascripthtmlcssreactjsbootstrap-4

When utilizing ES6, my HTML elements do not have event listeners re-attached to them unless I refresh the page

So, I have a task where I am displaying a simple string on the screen. The goal is that when you click on any letter in the string, it should be removed from its current position and added to the end of the string. However, after clicking on a letter and u ...

javascripthtmlfunctionecmascript-6event-listener

Unable to access REST API

I'm currently working on setting up a basic RESTful API with Django Rest Framework and integrating it with AngularJS. Despite following various tutorials and learning about controllers and resources in Angular, I seem to be facing an issue in accessin ...

javascriptangularjsrestdjango-rest-framework

It is not possible to make a call to Response.Redirect from within a static method

Hello, I am attempting to execute a webmethod using ajax from an aspx page. Essentially, I would like to redirect to another aspx page with a query string, but I need to do it through <a href> because it is part of a jQuery menu. Based on my underst ...

c#javascriptasp.netajaxstatic-methods

Conceal / Modify / Incorporate a picture

My ultimate goal is to have a hidden box and image that will be revealed based on the result of other functions. The box should change its background color, display an image, and switch images depending on the function called. I am facing two issues with ...

javascripthtmlcssimagesrc