Code Injection & Javascript that only works with one function
Hi, I am a hobbyist, doing HTML on and off for abt 20 years for fun, and adding CSS/JS later. Right now I am trying Ghost.org.
I am very new to JS. I am trying to do something so, so basic: giving a user the option to change color theme. And it works! But if I try to add more than one option/function, all functions become non-working :(
I have tried looking up all sorts of solutions, but the issues others have encountered (and the solutions) are waaaaaay more complex than this. I'm sure I am missing something obvious.
A second pair of eyes would be appreciated.
HTML (applied to page through a block element)
<form id="post-display">
<fieldset id="color-scheme">
<legend>Color Scheme</legend>
<input type="radio" id="eink" name="color-scheme" value="E-Ink" checked onclick="schemeScript1()">
<label for="eink">E-Ink</label>
<input type="radio" id="lightmode" name="color-scheme" value="Light Mode" onclick="schemeScript2()">
<label for="lightmode">Light Mode</label><br>
<input type="radio" id="darkmode" name="color-scheme" value="JavaScript" onclick="schemeScript3()">
<label for="darkmode">Dark Mode</label><br>
</fieldset>
</form>
JAVASCRIPT (Injected into page footer)
Text<script>
const posts = document.getElementsByClassName("post");
//default checked radio button
function schemeScript1() {
posts[0].style.color = #181818;
posts[0].style.backgroundColor = #EBEBEB;
return
};
// This one works if it is alone
function schemeScript2() {
posts[0].style.color = "black";
posts[0].style.backgroundColor = "white";
};
function schemeScript3() {
posts[0].style.color = #EBEBEB;
posts[0].style.backgroundColor = #181818;
return
};
</script>
I also tried an if/then/else (a single function called schemeScript() )to keep it more organized but it did not work at all, at any point.
// runs any time a radio button is clicked
function schemeScript() {
if (document.getElementId("lightmode").checked = true;) {
posts[0].style.color = "black";
posts[0].style.backgroundColor = "white";}
else if (document.getElementId("darkmode").checked = true;) {
posts[0].style.color = #EBEBEB;
posts[0].style.backgroundColor = #181818;}
else {
posts[0].style.color = #181818;
posts[0].style.backgroundColor = #EBEBEB;}
}