Reset button problem (radio button and list inputs)

JavaScript
1

Hi everyone!

There is a problem with my reset button.
After click any radio button (dot will be yellow color then) and/or choose an option from the list below do not get back to start position when I click reset button (dot without color and list with ‘click here’ text).

I put some comments in this code as my not working ways to solve this situation.

Here is a code: https://codepen.io/Krzysiek1981/pen/dBrgKE?editors=1010

Thanks for the help!

1 Like
2

You have many different problems here. Let’s deal with the easiest first.

Do you understand the difference between the = operator and the == operator. If not, you should do some research on the differences. This will help with the following lines:

fun.checked == false;
record.checked == false;

Regarding the actual error you are seeing in the browser console, you are using the following code to assign a NodeList to a variable named active.

let active = document.querySelectorAll(".gameopt::before");

What exactly are you hoping to do in the above line of code?

1 Like
3

As I remember == is used when we need to compare 2 properties/values, but not with the same type (for example we can’t compare string with number with ===, but with ==). = is only when we have got declaration (something like let a = 3;)

That selector was taken to remove yellow color from the label (class ‘.gameopt::before’) by addEventListener with ‘click’ on reset button.

4

= is the assignment operator.

fun.checked == false;
record.checked == false;

You are using the equality operator above which is not really doing anything.

5

OK. I changed code - replacing path for active and add two if conditionals.

I was try 2 paths for active and I see that both were null.
::before (or :before) pseudoclass exist after clicking radio button, so why this doesn’t work when I click in order radio -> reset buttons?

6

So once you fix the syntax issues:

  1. You can’t really select pseudoclasses/elements using JS because they don’t really exist, they’re just something defined in the styling, they aren’t part of the DOM. There are ways to do it by figuring out what the style is after it’s been computed by the browser, but you don’t really want to get into that.
  2. I would strongly advise using check boxes instead of radio buttons. Checkboxes are nice and easy to check on and off en masse using JS (ie resetting all the values at once). Radio buttons are not.
7

  1. I need to remove color by any method - how to put and remove color from the clicked place without pseudoclasses? Div with background color?

  2. Checkbox as alternative - but they must works separately (only one button must be active at once - like radio button).

8

As said, you can’t really set styles on pseudo-elements (stackoverflow).

One option that seems pretty clean which was suggested in the stackoverflow thread is to use custom properties (CSS variables), just as an example.
https://codepen.io/anon/pen/BgEmoQ

9

Yes, I forgot about selectedIndex = 0 for the list, which is the simplest method when we are using change in addEventListener (I put change myself in the code :wink: )

OK, thanks for everyone.

10

Your change event listener was on the button. I also don’t see why you would want to reset on change for the select?

11

It was my “2 in 1” way to reset list (click and change), but it was too much for once.

12