I get null as the value referring to the radio button-CodePudding

I need to set the radio Button to the value I pass via url.

function filterCategory(ads) {
  let categories = Array.from(new Set(ads.map(ann => ann.category)));

  let rowCategoryRadio = document.querySelector('#row-category-radio');

  categories.forEach((cat, i) => {

    let input = document.createElement('div');

    input.classList.add('form-check');

    input.innerHTML = `
        <input  type="radio" name="category-filter" id="flexRadioDefault${i}" data-filter="${cat}">
        <label  for="flexRadioDefault${i}">
        ${cat}
        </label>
        `
    rowCategoryRadio.appendChild(input);
  })
}

<div  id="row-category-radio">
  <div >
    <input  type="radio" name="category-filter" id="flexRadioDefault1" data-filter="all" checked>
    <label  for="flexRadioDefault1">
                        All categories
                      </label>
  </div>
</div>

To set the radio button to the value I step I wrote the following code, just that I'm getting the value of selected null

let url_string = window.location.href;
let url2 = new URL(url_string);
let name_url = url2.searchParams.get("name");

let radios = document.querySelector('.filter-category');
let selected = radios.querySelector(`[data-filter="${name_url}"]`);
selected.checked = true;;
console.log(selected);

Can anyone kindly help me?

CodePudding user response：

radios.querySelector() searches for elements nested within radios that match the selector. But the data-filter attribute is on the radios element itself, not a nested element.

You want to put these into a single query selector.

let selected = document.querySelector(`.filter-category[data-filter="${name_url}"]`)