Почему скрипт выбирает символ "<" вместо буквы "C"?
Почему скрипт выбирает символ "<" вместо буквы "C"?
Когда появляется тег <noscript>, скрипт забирает его содержимое, вместо слова "Ссылка 1", без него всё работает корректно.
let letters = [];
const itemList = [];
document.querySelectorAll('.productdetaiils li').forEach((el, i) => {
const letter = el.innerText.trim().split(' ')[0][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()
}
}
});
.productdetaiils {
display: none;
}
span {
display: block;
width: 200px;
border: 1px solid black;
text-align: center;
padding: 10px;
}
<div class="tabs-stage">
<div class="rower">
<h3 class="frst-rep-ttl">Выберите неисправность устройства:</h3>
<div class="fix-item first-check">
<input autocomplete="off" id="link1" class="linkinp form-check-input" name="c" type="radio" value="?start=1">Ссылка 1
</div>
</div>
</div>
<ul class="productdetaiils">
<li>
<div class="entry-image intro-image"><img src="https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png">
<noscript><img src=https://cdn4.buysellads.net/uu/1/62837/1587604228-cp-80x80.png alt="Aspire 5732ZG" itemprop=thumbnailUrl /></noscript>
</div>
<input type="radio" class="form-check-input" value="/all/laptops/acer/aspire-r-13-r7-372t-520q" name="a"> Ссылка 2
</li>
<li>
<div class="entry-image intro-image">
<input type="radio" class="form-check-input" value="/all/laptops/acer/aspire-r-13-r7-372t-520q" name="a"> Вторая ссылка 2
</li>
</ul>
<div class="results">
<ul class="tabs"> </ul>
<ul class="content"></ul>
</div>
Ответы (1 шт):
Автор решения: vp_arth
→ Ссылка
Не совсем ответ, скорее демонстрация проблемы.
innerText выбирает содержимое скрытого noscript не так, как вы ожидаете:
console.log(document.getElementById('test1').innerText);
console.log(document.getElementById('test2').innerText);
#test1 {display: none;}
<div id=test1>A<noscript><span>X</span></noscript>B</div>
<div id=test2>A<noscript><span>X</span></noscript>B</div>