Всем привет, хотел попробовать сделать поиск по сайту но чот не получается...
Вот код
(контент массив с информацией )
var CATALOG = [
{
name: "Harry Potter",
house: "House: Gryffindor",
img: "http://hp-api.herokuapp.com/images/harry.jpg",
},
{
name: "Hermione Granger",
house: "House: Gryffindor",
img: "http://hp-api.herokuapp.com/images/hermione.jpeg",
},
{
name: "Ron Weasley",
house: "House: Gryffindor",
img: "http://hp-api.herokuapp.com/images/ron.jpg",
},
{
name: "Draco Malfoy",
house: "House: Slytherin",
img: "http://hp-api.herokuapp.com/images/draco.jpg",
},
{
name: "Cho Chang",
house: "House: Ravenclaw",
img: "http://hp-api.herokuapp.com/images/cho.jpg",
},
{
name: "Cedric Diggory",
house: "House: Hufflepuff",
img: "http://hp-api.herokuapp.com/images/cedric.png",
},
]
(вывод в html)
var htmlCatalog = ""
CATALOG.forEach(({name, house, img}) => {
htmlCatalog += `
<div id="box" class="container">
<div class="text">
<h3>${name}</h3>
<h4>${house}</h4>
</div>
<img src="${img}">
</div>
`
var html = `
<div class="wrapper">
<div class="block">
<div class="center">
<span>search</span>
<p>search and do not lose</p>
</div>
<div class="search1">
<div class="search2">
<input placeholder="search" class="search" type="search" id="search">
<div class="btn" id="btn"></div>
</div>
</div>
<div class="contant">
${htmlCatalog}
</div>
</div>
</div>
`
contants.innerHTML = html
})
(а тут я пытаюсь сделать поиск по имени {name})
CATALOG.forEach(({name}) => {
btn.addEventListener("click", () => {
if(search.value == {name}) {
console.log("Нашел")
}
else {
console.log("Не нашел")
}
})
})
Еще я знаю что {name} это массив и его нужно преобразовать в троку но все ровно нет результата