CODEWITHSUNDEEP
javascripthtmlcss
dusty
dusty

Reputation: 33

Updating CSS with JS

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.

Reservation Items

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:

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.

Upvotes: 1

Views: 60

Answers (1)

Halo
Halo

Reputation: 1970

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!

Upvotes: 1

Related Questions