It seems like you followed the instructions correctly, except for one small detail (see below*). The code in the article uses curly quotes ‘’ “” instead of straight quotes '' "".
<a href=”#” onclick=”setActiveStyleSheet(‘default’); return false;”>Change style to default</a>
<a href=”#” onclick=”setActiveStyleSheet(‘alternate’); return false;”>Change style to alternate</a>
If you copied and pasted this part, it may not parse correctly. Here is the correct version with straight quotes:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>
Please review this PLUNKER instead of the Snippet provided. The Snippet may not work due to multiple stylesheets being involved.
SNIPPET (Not Functional, review PLUNKER instead.)
<!doctype html>
<html>
<head>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>
<link href='default.css' title='default' rel='stylesheet'>
<link href='alt.css' title='alt' rel='alternate stylesheet'>
<style>
body {
padding-top: 50px;
padding-bottom: 0px;
}
</style>
</head>
<body>
<section>
<p>TEST</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='styleSwitcher.js'></script>
</body>
</html>
* I noticed you mentioned:
...my external css files are added at the bottom of the body...
It's recommended to always place <link>s inside the <head>. Usually, JavaScript/jQuery requires the DOM to be loaded before functioning properly. Therefore, ensure that your styling (<link> and <style>) are included first and within the <head>.
As for <script>, it's best practice to place them near the end of <body>, just before the closing tag </body>. Refer to the Snippet and PLUNKER for an example layout of <link>, <style>, and <script>.