'checked' with if statement does not work properly

Question

Hi guys i am making calculator app and i have got a problem. I made 3 radio buttons and want them to be checked with 'if statement' in JS file. It just does not work at all because 'main' does not get any class when input2 or 3 is clicked. Only the first one makes 'main' getting it but thats because of input1.checked defaultly set to true. Can anyone help me, pls?

Here is the link to the project on my github: https://github.com/Adrian397/frontEndMentorChallenges/tree/master/calculator-app-main

Here is live site of it: https://adrian397.github.io/frontEndMentorChallenges/calculator-app-main/index.html

js file html file

Answer 1

Really liked your idea with different themes.

Coming to your query. Looks like you have been using const for the main variable. Hence you won't be able to change it. It would help if you can change the variables to var or let.

Note: Always use const when you are sure that you are not going to change that variable.

Also, its a great habit if you can use:

if(document.getElementById('input1').checked) {
                document.getElementById("main").innerHTML
                    = <Your code goes here>
            }

This simplifies the process and keeps the source clean for one Page applications.

Hope this helps. May the source be with you !

Answer 2

Before all, at the first line of your js code you are declaring let main= document.querySelector('main'); This cannot works there because a variable declared as let can be visible only in the function where it is declared so

It's not in the scope of your function declared later (Not visible to it)

then you are declarig input as const and it could give some problem because a constant cannot update so the state checked should be always the same

your code corrected should be this

document.addEventListener("DOMContentLoaded", ()=>{
   let main = document.getElementById("main");
   let firstInput = document.getElementById("input1");
   let secondInput = document.getElementById("input2");
   let thirdInput = document.getElementById("input3");

   if(firstInput.checked == true){
      main.classList.add('dark');
   }else {
      main.classList.remove('dark');
   }
});

Just add the other 'if' like this above. Also give an id to the html element main to get it from id

Answer 3

I got help on another post so here im pasting corectly working code:

let input1 = document.getElementById("input1");
let input2 = document.getElementById("input2");
let input3 = document.getElementById("input3");
let main = document.getElementById("main");

input1.checked = true;

function setColorTheme() {
  if (input1.checked == true) {
    main.classList.add("dark");
  } else {
    main.classList.remove("dark");
  }
  if (input2.checked == true) {
    main.classList.add("light");
  } else {
    main.classList.remove("light");
  }
  if (input3.checked == true) {
    main.classList.add("saturated");
  } else {
    main.classList.remove("saturated");
  }
}

setColorTheme();

document.querySelectorAll('input[name="theme"]').forEach((e) => {
  e.addEventListener("change", setColorTheme);
});

The problem was solved by adding these lines and making variables declarations using 'let':

document.querySelectorAll('input[name="theme"]').forEach((e) => {
      e.addEventListener("change", setColorTheme);
    });