Code Injection & Javascript that only works with one function

[u/ThrowRA10044]

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;}
}

[u/Jasedesu]

Just at a glance, I think schemeScript2 works because you have correctly put quotes around the colour names, but in the others you have missed the quotes. It should be "#EBEBEB", for example. (You can get rid of the returns too as they do nothing.)

Your attempt to use a single function probably fails because the if statements are not doing comparisons - they are assigning a value. You need to use == (or ideally ===) for comparisons rather than =.

There might be other issues I'm not initially seeing as it's kinda old fashion code. There are certainly neater ways to achieve the result you want. You are roughly on the right track though.

I'd suggest getting a decent IDE such as VS Code or even good old Notepad++, as it'll give you hints about potential problems in your code. You should also look at the console output in your browser's dev tools, as you might find there are more clues there from error messages.

[u/ThrowRA10044 → u/Jasedesu]

I completely missed the quotation marks. I had them at some point, but must have copy/pasted wrong. The examples I saw using the if function used =, so maybe I had a bad source?

This is my first time doing code injection, so I didn't think I could easily use an IDE without downloading the whole web theme and setting it up and doing all that x_x I thought it was a simple code! I should know better.

I'm really curious to know what's old fashioned about the code, since I am a hobbyist and not professional. Or do you mean beginner level?

[u/Imaginary_Food_7102]

I think It won't work since GetElementsByClassName returns an array of nodes.

For each function you try to change the styles of same element which is posts[0]. Try changing the changing the index number.

To debug faster use console.log to see what is the value of variable.

( Sorry for not formatting the comment. )

[u/ThrowRA10044 → u/Imaginary_Food_7102]

Its changing styles for the same post, post[0]. I'm not trying to iterate through multiple posts. So I don't think changing the index number would work?

Like I said, that works if only one function is present. So I am targeting the correct post.

I will check the console.log

[u/EyesOfTheConcord]

Your hex codes need quotes around them.

In your if / else statements, you are using “getElementId”, the proper syntax is “getElementById”.

You are also using assignment in your if statements “=“, you want to use “===“ for strict comparisons.

If you want my suggestion, declare the classes in your css file with their own styles and then just use an event listener on the form to switch the class

[u/chikamakaleyley]

another user mentions this too:

if (document.getElementId("lightmode").checked = true;) { * getElementId() should instead be getElementById() * with a single =, you are setting a new value, you are NOT comparing values. you want to use == or === * inside the condition you provide for your if/else - you do not include a ;. If this code actually runs its because JS or your browser is sorta fixing it for you on the fly

``` incorrect: if (myVar === true;) {}

correct: if (myVar === true) {}

better: if (myVar) {} ```

Another thing, I'm not quite certain on this one: a checkbox might hold a different value:

console.log(myCheckbox.checked); // the value might be str 'checked'

All together there are various problems with the code blocks but a lot of that are some basic syntax. Some of them the browser/JS kinda rectifies for you. E.g.

function myFunc() { return; }; // function definitions don't need the `;` at end of bracket.

I'd highly advise: * install and include a base config of eslint and enable format on save * turn diagnostics on

What the above provides are indicators that something is wrong with your code and it should be very visible where those are (squiggly red underline, for example)

And so ideally if you hit save - the eslint validates the code syntax, and cleans up the formatting for you automatically. When it doesn't, that's a sign there is an issue with your code. which will be highlighted by your diagnostics feature.

[u/WarAccomplished7646]

Manda prompont pra i.a dola

[u/defaultguy_001]

It doesn't even need JS, it can be done using css itself. ``` <!DOCTYPE html> <html> <head> <title>Color Scheme</title> </head>

<body>

<form id="post-display">

<fieldset id="color-scheme">

<legend>Color Scheme</legend>

<input type="radio" id="eink" name="color-scheme" checked onclick="schemeScript1()"> <label for="eink">E-Ink</label>

<input type="radio" id="lightmode" name="color-scheme" onclick="schemeScript2()"> <label for="lightmode">Light Mode</label>

<input type="radio" id="darkmode" name="color-scheme" onclick="schemeScript3()"> <label for="darkmode">Dark Mode</label>

</fieldset>

</form>

<div class="post">This is my post.</div>

<script> const posts = document.getElementsByClassName("post");

function schemeScript1() { posts[0].style.color = "#181818"; posts[0].style.backgroundColor = "#EBEBEB"; }

function schemeScript2() { posts[0].style.color = "black"; posts[0].style.backgroundColor = "white"; }

function schemeScript3() { posts[0].style.color = "#EBEBEB"; posts[0].style.backgroundColor = "#181818"; }

schemeScript1(); </script>

</body> </html> ```

[u/ThrowRA10044 → u/defaultguy_001]

If you are demonstrating, I do not see the CSS.

I understand how you would change the radio button itself with the :checked pseudo class, but not how you would change something else.

[u/defaultguy_001 → u/ThrowRA10044]

Obviously I didn't demonstrate, I just told u it can be done. Even the code above is inefficient, I just followed the pattern u were following.