Updating CSS with JS

Question

I'm fairly new to JS and I'm a little lost as to how to continue with this project. I am trying to make a reservation system where if you click one of the table cells below it will ask you to confirm and then once you confirm it will blacken the table cell out showing it was reserved.

Code for Bottom Right Table Cell:

<td class="reserve_time" colspan="4" onClick="tripod('6PM', '7PM','Tripod and Foldable Studio'); addClass('Tri6');"><a href='confirmation'></a></td>

The confirmation page:

Once I click "Submit" on this page I want it to update the CSS of the main calendar reservation system page to black out the the table cell that was reserved.

Confirmation Page Submit Button Code:


<button type="submit" class="succbtnR" onclick="updateReserved();" >Reserve</button>

CSS while not reserved:

.reserve_time{
  background: var(--clr-accent);
  font-size: 100;
  text-decoration:none;
  border:  solid;
}

When its reserved I want to update the CSS to:

.reserved{
  background: var(--clr-dark) !important;
  font-size: 100;
  text-decoration:none;
  border:  solid;
  pointer-events: none !important;
}

Right now all I really have for the JS is:

function addClass(piece){
  let equipt = piece;

}

function updateReserved(){
  //code to update css
  location.href="calender";

}

I have been trying to follow steps from: https://alvarotrigo.com/blog/change-css-javascript/ but I can not figure out how to implement it correctly into my code.

Just give the cell a different or additional class; you don't need to change the CSS. — Pointy
– Pointy, Commented Nov 7, 2022 at 21:52

TheHaloDeveloper · Accepted Answer · 2022-11-07 21:54:14Z

1

You already have the class created, no?

.reserved {
  background: var(--clr-dark) !important;
  font-size: 100;
  text-decoration: none;
  border: solid;
  pointer-events: none !important;
}

Although it is possible to set CSS using JavaScript, in this case it might just be easier to add and remove the class. So change your function to this:

function updateReserved() {
  your_element.classList.add('reserved'); //your_element is the reserved cell
  location.href = "calender";
}

Yes, it's that easy!

answered Nov 7, 2022 at 21:54

TheHaloDeveloper

3,1251 gold badge13 silver badges36 bronze badges

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

3 Comments

Nathaniel Flick Over a year ago

Spell calender "calendar".

TheHaloDeveloper Over a year ago

Yes, it wasn't my code, I copy and pasted from the question.

Nathaniel Flick Over a year ago

I noticed that, hence my comment on the original question, all good.

Collectives™ on Stack Overflow

Updating CSS with JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related