Coding Challenge: Change the CSS Style Sheet Using JavaScript - SOLUTION

Coding Challenge: Change the CSS Style Sheet Using JavaScript - SOLUTION

Below is a solution to the Change the CSS Style Sheet Using JavaScript coding challenge that I posted earlier this month.


There are many possible solutions to this coding challenge. The solution shown in the example below is only one possible option.

There were several errors in the original coding challenge:

  1. The id for the link tag on line 7 and the id selected on line 42 should have matching capitalization (mainStyles v. mainstyles).
  2. The anchor tags in lines 21-26 are not closed properly (</a> instead of <a>).
  3. The button id for the "Wild" button should be "wild" and not "experiment" in order to match the rest of the code.
  4. A quotation mark is missing from the getElementById method on line 42.
  5. The cleanBtn variable is used on line 50, but is not defined in the code.
  6. The variable named at the top of the switch statement should be called "stylesheet" and not "style."
  7. The second case in the switch statement is missing a colon.
  8. The expBtn variable in line 58 should be called wildBtn.
  9. A comma is missing from the addEventListener method on line 63.
  10. A semicolon is missing at the end of line 64.
  11. All instances of the getElementById() method are written as getElementByID(), which has incorrect capitalization.
  12. Extra lines of code need to be added to each case of the switch statement to remove the classes from the buttons that are not selected.
  13. The changeCSS() function needs to be called when the page is first loaded in order to select the current style sheet.

Download Completed Project Files View Completed Project

Close Window