Tick radio box based on label next to it

I am trying to automate a few questionnaires as a hobby. For years I had to deal with them and I was always wondering what the best ways to automate them were. Now I have reached a point where I can just fulfil my passion and learn how to do it. Could that benefit me? Absolutely not, but it will definitely help my JavaScript knowledge.

So, I found a random page with radio buttons and labels on the right. Each row with the tickbox (radio) and the label looks like this:

<div class="element even  groupingCols OneColumnEl clickableCell">
<span class="cell-sub-wrapper cell-legend-right">
<span class="cell-input cell-sub-column">
<input type="radio" name="ans30596.0.0" value="0" id="ans30596.0.0" class="input radio fir-hidden"><span class="fir-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 22 22" class="rounded">
<circle cx="10" cy="10" r="10" class="fir-base"></circle>
<circle cx="10" cy="10" r="9" class="fir-bg"></circle>
<circle cx="10" cy="10" r="7" class="fir"></circle>
</svg>
</span>
</span>
<span class="cell-text cell-sub-column"><label for="ans30586.0.0">Male</label> </span>
</span>
</div>

My steps:

a) Get the radio buttons:

for (const elem of document.querySelectorAll('[type="radio"]')){
    console.log("true")
};

b) Get the values of the labels in a list and then test to see if at least one value is being returned:

const list = document.getElementsByTagName('label')
let text = list.item(0).innerHTML;

c) Create a for to go through that list above:

for (i=0; i<list.length; i++)
{
    let text = list.item(i).innerHTML;
    console.log(text);
}

d) Change the class name to the "selected" one

So, overall my script seems to be working:

const list = document.getElementsByTagName('label');
const tickbox = document.querySelectorAll('[type="radio"]');

for (i=0; i<list.length; i++)
{
    let value = list.item(i).innerHTML;
      if(value = "Male")
    {
        //let spanclass = document.querySelector('span:nth-child('+i+')');
        let spanclass = document.querySelector("div:nth-child("+i+") > span > span.cell-input.cell-sub-column > span")
        if(spanclass != null)
        {
            spanclass.setAttribute("class", "fir-icon selected");
        }
    }
    
}

However, when I then click next to the next question page, I get an error as if the selection has not been made.

Am I missing anything in the final HTML. This is how it looked like when I clicked it manually without using a snipet in Chrome:

<span class="fir-icon selected">
<circle cx="10" cy="10" r="10" class="fir-base"></circle>
<circle cx="10" cy="10" r="9" class="fir-bg"></circle>
<circle cx="10" cy="10" r="7" class="fir-selected"></circle>
</span>

UPD:

I added that but it still does not work:

let circleclass = document.querySelector("div:nth-child(3) > span > span.cell-input.cell-sub-column > span > svg > circle:nth-child(3)")

circleclass .setAttribute("class", "fir-selected");

Solution

It looks like you are trying to select elements that aren't the inputs? Instead, change the values for the inputs, but instead of adding classes, set the inputs as checked, as shown below.

for (const elem of document.querySelectorAll('[type="radio"]')){
    elem.checked = true;
};

If you wanted to just check all the radio inputs, then this will be perfect, if not then you can just apply this principle to what you need.

Hopefully this helps.