我试过这段代码，我很确定这个函数工作得很好，它只是不输出我放在对象中的图像，所以有人可以帮助我做到这一点吗？到目前为止，这就是我所做的<!DOCTYPE html><html><head> <script> function test() { const test1 = window.prompt("Yayınevi gir"); const correctNameBooks = books.filter(book => book.name === test1); console.log(correctNameBooks); } let books = [ { name: 'Tonguç', imgUrl: 'https://i.redd.it/nv8gp4ms60161.png' }, { name: 'Nitelik', imgUrl: 'https://i.redd.it/nlhp8ij770161.png' }, { name: "Sonuç", imgUrl: 'https://i.redd.it/lhy1liao70161.png' }, { name: 'Supara', imgUrl: 'https://i.redd.it/t7263o2c80161.png' }, { name: 'Palme', imgUrl: 'https://i.redd.it/24gn3zdg80161.png' }, { name: 'Gezegen', imgUrl: 'https://i.redd.it/ibqo7b9j80161.png' }, { name: 'Karekök', imgUrl: 'https://i.redd.it/dkos5tds80161.png' }, { name: 'Arı', imgUrl: 'https://i.redd.it/oer1chfv80161.png' }, { name: 'Okyanus', imgUrl: 'https://i.redd.it/xkbv0gg290161.png' }, { name: 'Hız', imgUrl: 'https://i.redd.it/w167386b90161.png' }, { name: 'Sınav', imgUrl: 'https://i.redd.it/02md3r9d90161.png' }, { name: 'Esen', imgUrl: 'https://i.redd.it/k4ars8mf90161.png' } ]</script></head> <body> <button id="btn" onclick=test()>test</button> </body></html>总结代码，它应该输出名称与用户输入匹配的图像
1 回答
ABOUTYOU
TA贡献1812条经验 获得超5个赞
要显示图像，您需要使用<img>HTML 中的标签。在此示例中，您可以拥有多本同名书籍。
更多解释在评论中。
function test() {
const test1 = window.prompt("Yayınevi gir");
const correctNameBooks = books.filter(book => book.name === test1);
console.log(correctNameBooks);
const imageContainer = document.querySelector("div#image-container"); // Grab the parent/container
imageContainer.innerHTML = ""; // Remove all the children
for (let book of correctNameBooks) {
const newImage = document.createElement("img"); // Create a new image element/tag
newImage.src = book.imgUrl; // Set its source to the book's image url
imageContainer.appendChild(newImage); // Add the image to the image container's children
}
}
let books = [
{
name: 'Tonguç',
imgUrl: 'https://i.redd.it/nv8gp4ms60161.png'
},
{
name: 'Nitelik',
imgUrl: 'https://i.redd.it/nlhp8ij770161.png'
},
{
name: "Sonuç",
imgUrl: 'https://i.redd.it/lhy1liao70161.png'
},
{
name: 'Supara',
imgUrl: 'https://i.redd.it/t7263o2c80161.png'
},
{
name: 'Palme',
imgUrl: 'https://i.redd.it/24gn3zdg80161.png'
},
{
name: 'Gezegen',
imgUrl: 'https://i.redd.it/ibqo7b9j80161.png'
},
{
name: 'Karekök',
imgUrl: 'https://i.redd.it/dkos5tds80161.png'
},
{
name: 'Arı',
imgUrl: 'https://i.redd.it/oer1chfv80161.png'
},
{
name: 'Okyanus',
imgUrl: 'https://i.redd.it/xkbv0gg290161.png'
},
{
name: 'Hız',
imgUrl: 'https://i.redd.it/w167386b90161.png'
},
{
name: 'Sınav',
imgUrl: 'https://i.redd.it/02md3r9d90161.png'
},
{
name: 'Esen',
imgUrl: 'https://i.redd.it/k4ars8mf90161.png'
}
]
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="btn" onclick=test()>test</button>
<div id="image-container"></div>
</body>
</html>
添加回答
举报
0/150
提交
取消