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 =?](https://stackoverflow.com/questions/11871616/in-javascript-vs) — Ivar, Aug 15 '21 at 21:22

ahsan · Accepted Answer · 2021-08-15T21:45:43.063

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 '21 at 21:45

answered Aug 15 '21 at 21:22

ahsan

1,409
8
11

I’m this case I would have 7 days to style right? – RMaxwell87 Aug 15 '21 at 21:36
@RMaxwell87 yes – ahsan Aug 15 '21 at 21:37
This is probably very novice but where do I put the .sunday stylings? Do I put them in my css? – RMaxwell87 Aug 15 '21 at 22:45
@RMaxwell87 yes, [How to add CSS](https://www.w3schools.com/css/css_howto.asp) – ahsan Aug 16 '21 at 06:47

vanowm · Answer 2 · 2021-08-15T21:27:01.823

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

Javascript If statement HTML

2 Answers2