I found the following stack URL answer: How do I change stylesheet using a dropdown box?
For jQuery onclick SwapStyleSheet; I built the following that works great! The only problem is; once I place my very Elementary CSS files in css/ folder and add css/ before the "#" on example line:
Holy Spirit Filled Black DragonMy Full Working Example without the .css files in subfolder "css" (which is where I would like to learn how to point them to and this Elementary code still function):
<!-- jQuery onclick Basic Example - Swap CSS on HTML5 Drop-Down List -->
<!-- StackOverFlow URL: -->
<!-- https://stackoverflow.com/questions/42754879/how-do-i-change-stylesheet-using- a-dropdown-box -->
<!-- Date Solved: 03/20/2024 -->
<!-- Time Solved: 08:55AM -->
<!-- Twitter/X Accounts: -->
<!-- Brandon Kastning: @BRKastning -->
<!-- Future Elected American Constitutionally Bound Public Servant, American Constitutional Officer, U.S. Senator, Brandon Kastning: @SenatorKastning -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="js/jquery-3.7.1.js"></script>
<title>Sharpen Your Sword Productions - (2024) - [Kastning Web-Dev Library: Swap Style Sheet from HTML5 Dropdown]</title>
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<h2>Javascript Change StyleSheet Without Page Reload | HTML5 Dropdown List</h2>
</body>
</html>
<div class="select">
<select name="html5_select_drop_down_sys_2024_dev_r2_css" id="swapStyleSheet">
<option>Sharpen Your Sword Productions (2024) [CSS Themes]</option>
<option value="<a href="#" onclick="swapStyleSheet('default.css')">Elohim Heaven & Earth Creationism [Default]</a>
<option value="<a href="#" onclick="swapStyleSheet('dark.css')">Holy Spirit Filled Black Dragon</a>
<option value="<a href="#" onclick="swapStyleSheet('light.css')">Holy Spirit Filled White Unicorn</a>
</select>
</div>
The "default.css":
h2 {
color: gold;
}
The "dark.css":
h2 {
color: black;
}
The "light.css":
h2 {
color: white;
}
The live current (as of 03/20/2024) jQuery Uncompressed .js file URL is: https://code.jquery.com/jquery-3.7.1.js
Thanks! (If formatting is slightly off; stackoverflow Made me indent all code by 4 spaces).
I figured out the Solve as follows:
I changed this:
To this:
Problem Solved!
EDIT: Problem NOT Solved! I must have loaded the wrong browser window. Same problem exists.
Thanks for all the Great Information and Code Remedies on StackOverflow to those kind enough and motivated enough to assist us noobs :)
Best Regards,