Javascript If statement HTML

Question

I have the following code to generate the current date in a specific format. I want to have an if statement that will change the back ground color and the font color depending if the specific day is on a Sunday, Saturday, or a Week day.

var date = new Date();
var dayMonthYear = date.toLocaleString('en-US', {month:'long',day:'numeric',year:'numeric'}).replaceAll(", ", "-");
var weekday = date.toLocaleString('en-US', { weekday: 'long' })
document.write(dayMonthYear + ' [' + weekday + ']');

I thought I would just create a general if statement that looks at the weekday variable but it doesn't seem to work correctly like I would think.

if (weekday = 'Sunday') {
    background-color:aqua;
    color: blue;
    }

Also, any ideas on how to get a - between the Month and Day number?
Example: August-15-2021 My current code generates August 15-2021

Does this answer your question? In javascript == vs =?

Ivar
– Ivar

2021-08-15 21:22:53 +00:00
Commented Aug 15, 2021 at 21:22 — Ivar
– Ivar, Commented Aug 15, 2021 at 21:22

ahsan · Accepted Answer · 2021-08-15 21:45:43Z

2

A good approach to this would be to make your preferred stylings as different classes then add that class to your HTML using JavaScript.

That way you can avoid the if statements altogether

I have made an applyStyling function that takes the weekday variable as an argument

function applyStyling(day){
  let body = document.querySelector("body");
  body.classList.add(day.toLowerCase());
}

var date = new Date();
var dayMonthYear = date.toLocaleString('en-US', {month:'long',day:'numeric',year:'numeric'}).replaceAll(", ", "-");
var weekday = date.toLocaleString('en-US', { weekday: 'long' })
document.write(dayMonthYear + ' [' + weekday + ']');

applyStyling(weekday);

.sunday {
  background-color:aqua;
  color: blue;
}
.monday {
  background-color:lightcoral;
  color: brown;
}

edited Aug 15, 2021 at 21:45

answered Aug 15, 2021 at 21:22

ahsan

1,50411 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

RMaxwell87 Over a year ago

I’m this case I would have 7 days to style right?

ahsan Over a year ago

@RMaxwell87 yes

RMaxwell87 Over a year ago

This is probably very novice but where do I put the .sunday stylings? Do I put them in my css?

ahsan Over a year ago

@RMaxwell87 yes, How to add CSS

vanowm · Accepted Answer · 2021-08-15 21:27:01Z

Single = is assigning value to the variable, while double == or triple === is a comparison between two values.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

Once you corrected the expression, the actual color change of a HTML element can be done via inline style:

element.style.backgroundColor = "aqua";

or better yet by changing/adding css class of the element:

element.classList.add("aqua");

As for adding - you can use this regex / (\d)/

var date = new Date();
var dayMonthYear = date.toLocaleString('en-US', {month:'long',day:'numeric',year:'numeric'}).replaceAll(", ", "-");
var weekday = date.toLocaleString('en-US', { weekday: 'long' })

console.log(dayMonthYear.replace(/ (\d)/, '-$1') + ' [' + weekday + ']');

if (weekday == 'Sunday') {
  document.body.style.backgroundColor = "aqua";
  document.body.style.color = "blue";
}

document.body.classList.add("myclass");

body.myclass
{
  font-size: 10em;
}

test

Collectives™ on Stack Overflow

Javascript If statement HTML

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related