ПРИВЕТ!
Кто-нибудь подскажите, как задать стиль для отфильтрованного элемента(filter в скрипте). Через filter.style.color="red" получаю ошибку.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body{
width:1920px;
height:1024px;
background-color:#fffdfe;
font-family: Brandon Grotesque;
letter-spacing: 0.3px;
}
#search_bar {
height: 40px;
width: 652px;
width: 652px;
border: 1px solid #D6D6D6;
position: absolute;
top:48px;
bottom: 0%;
margin-left: 349px;
margin-right: 349px;
cursor: pointer;
font-size: 13px;
padding-left: 9px;
}
#row2 {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
width: 652px;
}
#row2 li a {
border: 1px solid #ddd;
background-color: #f6f6f6;
text-decoration: none;
font-size: 18px;
color: blue;
display: inline-block;
border-right: none;
border-left: none;
padding-top: 25px;
padding-bottom: 25px;
}
#row2 li a:hover{
background-color: #eee;
color: red;
}
#icon1::after {
content: "\2B07";
float: right;
font-size: 23px;
background-color:aqua;
display: inline-block;
}
#icon1:hover::after {
content: "\2B06";
}
#top2,#top{
margin-left: 349px;
margin-right: 349px;
background: aliceblue;
width: 652px;
margin-top: 155px;
}
#top2{
margin-top: 55px;
}
#top3{
align-items: center;
width: 637px;
display: inline-block;
background: #406e97;;
display: inline-block;
}
.column{
color:background: #323232;
cursor: pointer;
display: inline-block;
padding-right: 12px;
}
.column:hover{
color:#EF5E3A;
}
a{text-decoration:none;
}
a:hover{
color:red;
}
.color{
color:aqua;
}
</style>
</head>
<body>
<input type="text" name="example" id="search_bar" onkeyup="myFunction()" value="🔍 Search FAQ" onfocus="value=''">
<div id="all_top">
<div id="top"></div>
<div id="top2"></div>
</div>
<script>
var arr2=[
{name:'HELLO'},
{name:'GOOD DAY'},
{name:'MORNING'},
]
var text='<ul id="row2">';
for(var i=0; i<arr2.length; i++){
text+='<li ><a href="#"><div id="top3">'+arr2[i].name+'</div></a></li>';
}
text+='</ul>';
document.getElementById('top2').innerHTML= text;
function myFunction() {
var input, filter, ul, li, a, i, txtValue,b;
input = document.getElementById("search_bar");
filter = input.value.toUpperCase();
//filter.style.color="red";
console.log(filter+'-it filter');
ul = document.getElementById("all_top");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>