Question:
The script below does the following:
When you press the radio "O", "E", "B", "R" is filtering by the first letter of the second word. After we filter, clicking on the filtered checkbox needs to scroll to the "Content" label, but it doesn't. I suspect that this is due to dynamic filtering. Please help.
document.querySelectorAll("input[type='radio']").forEach(el => el.checked=false);
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetails li').forEach((el, i) => {
const letter = el.innerText.trim().split(' ')[1][0];
letters.push(letter);
letters = [...new Set(letters)];
itemList.push({
id: i,
content: el.innerHTML,
letter
});
const lettersMap = letters.map(el => {
return `<label class="example-lk"><input class="downers form-check-input" name="b" type="radio" value=${el} autocomplete="off">${el}</label>`
});
document.querySelector('.results .tabs').innerHTML = lettersMap.join('')
});
document.querySelectorAll('.tabs input').forEach(tab => {
tab.onclick = (e) => {
if(tab.name!=="b") return;
const FilteredList = itemList.filter(item => item.letter === e.target.value).map(item => `<li>${item.content}</li>`);
document.querySelector('.results .content').innerHTML = FilteredList
e.target.closest(".results").querySelector(".content").classList.add("show");
const pd = document.querySelector(".productdetails")
if (pd) {
pd.remove()
}
}
});
(() => {
const handler = evt => {
if (evt.target.checked)
tabs.scrollIntoView({ block: 'start', behavior: 'smooth' });
};
const tabs = document.querySelector('.row');
for (let cbox of document.querySelectorAll('.wannaup'))
cbox.addEventListener('change', handler);
})();.tabs {
border: 1px solid black;
padding: 10px;
width: 300px;
display: flex;
justify-content: space-between;
}<div class="row">КОНТЕНТ</div>
<div class="results">
<ul class="tabs">
<li>
<label class="example-lk">
<input class="downers form-check-input" name="b" type="radio" value="3" autocomplete="off">3</label>
</li>
</ul>
<ul class="content"></ul>
</div>
<ul class="vmproduct productdetails">
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-omonefivezerotwonh.html" title="3Q OM1502NH"><img src="/images/virtuemart/product/resized//resized/3q-om1502nh_0x90.jpg" alt="/resized/3q-om1502nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-omonefivezerotwonh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OM1502NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonethreezerosixn.html" title="3Q ES1306N"><img src="/images/virtuemart/product/resized//resized/3q-es1306n_0x90.jpg" alt="/resized/3q-es1306n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonethreezerosixn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1306N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ogonefivezerothreenh.html" title="3Q OG1503NH"><img src="/images/virtuemart/product/resized//resized/3q-og1503nh_0x90.jpg" alt="/resized/3q-og1503nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ogonefivezerothreenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OG1503NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esoneonezerofiven.html" title="3Q ES1105N"><img src="/images/virtuemart/product/resized//resized/3q-es1105n_0x90.jpg" alt="/resized/3q-es1105n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esoneonezerofiven.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1105N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonezerozeroonen.html" title="3Q ES1001N"><img src="/images/virtuemart/product/resized//resized/3q-es1001n_0x90.jpg" alt="/resized/3q-es1001n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonezerozeroonen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1001N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonefourzerosixn.html" title="3Q ES1406N"><img src="/images/virtuemart/product/resized//resized/3q-es1406n_0x90.jpg" alt="/resized/3q-es1406n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonefourzerosixn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1406N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-elonezerozerofourn.html" title="3Q EL1004N"><img src="/images/virtuemart/product/resized//resized/3q-el1004n_0x90.jpg" alt="/resized/3q-el1004n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-elonezerozerofourn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EL1004N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-omonefivezerotwonh.html" title="3Q OM1502NH"><img src="/images/virtuemart/product/resized//resized/3q-om1502nh_0x90.jpg" alt="/resized/3q-om1502nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-omonefivezerotwonh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OM1502NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-esonezerozeroonenn.html" title="3Q ES1001NN"><img src="/images/virtuemart/product/resized//resized/3q-es1001nn_0x90.jpg" alt="/resized/3q-es1001nn" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-esonezerozeroonenn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ES1001NN</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-oeonefivezeroonenh.html" title="3Q OE1501NH"><img src="/images/virtuemart/product/resized//resized/3q-oe1501nh_0x90.jpg" alt="/resized/3q-oe1501nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-oeonefivezeroonenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OE1501NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ononefourzerothreen.html" title="3Q ON1403N"><img src="/images/virtuemart/product/resized//resized/3q-on1403n_0x90.jpg" alt="/resized/3q-on1403n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ononefourzerothreen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q ON1403N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-eneightninezeroonen.html" title="3Q EN8901N"><img src="/images/virtuemart/product/resized//resized/3q-en8901n_0x90.jpg" alt="/resized/3q-en8901n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-eneightninezeroonen.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EN8901N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-bnonethreezerotwon.html" title="3Q BN1302N"><img src="/images/virtuemart/product/resized//resized/3q-bn1302n_0x90.jpg" alt="/resized/3q-bn1302n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-bnonethreezerotwon.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q BN1302N</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-rsonezerozeroonet.html" title="3Q RS1001T"><img src="/images/virtuemart/product/resized//resized/3q-rs1001t_0x90.jpg" alt="/resized/3q-rs1001t" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-rsonezerozeroonet.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q RS1001T</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-ogonefivezerothreenh.html" title="3Q OG1503NH"><img src="/images/virtuemart/product/resized//resized/3q-og1503nh_0x90.jpg" alt="/resized/3q-og1503nh" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-ogonefivezerothreenh.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q OG1503NH</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-rsonezerozeroonetn.html" title="3Q RS1001TN"><img src="/images/virtuemart/product/resized//resized/3q-rs1001tn_0x90.jpg" alt="/resized/3q-rs1001tn" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-rsonezerozeroonetn.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q RS1001TN</h3>
</li>
<li class="product-container">
<a href="/3q/noutbuki/gliuchit-zavisaet/3/threeq-euonezerozerofiven.html" title="3Q EU1005N"><img src="/images/virtuemart/product/resized//resized/3q-eu1005n_0x90.jpg" alt="/resized/3q-eu1005n" class="featuredProductImage"></a> <input class="form-check-input wannaup" value="/threeq-euonezerozerofiven.html" type="radio" name="c">
<h3 class="prod-list-choose">3Q EU1005N</h3>
</li>
</ul>Answer:
Event handlers in js are associated with the element objects they are hung on. When you hang a handler, it changes the state of the object on which you hung it. If you delete an element, then its handler is deleted along with it. New elements added to the dom after you have already set change handlers will not cause scrolling. They are new, the handler is not hung on them!
There are two ways out of the situation.
- Each time you add new elements to the page, hang a handler on them.
- Hang the handler on a common parent, taking advantage of the fact that events pop up .
The second option seems more elegant to me.
document.querySelector('.content').addEventListener('change', handler);