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 class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault${i}" data-filter="${cat}">
<label class="form-check-label" for="flexRadioDefault${i}">
${cat}
</label>
`
rowCategoryRadio.appendChild(input);
})
}<div class="row" id="row-category-radio">
<div class="form-check">
<input class="form-check-input filter-category" type="radio" name="category-filter" id="flexRadioDefault1" data-filter="all" checked>
<label class="form-check-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?
>Solution :
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}"]`)