为什么我的 js 对象不输出我放入其中的图像
我试过这段代码，我很确定这个函数工作得很好，它只是不输出我放在对象中的图像，所以有人可以帮助我做到这一点吗？到目前为止，这就是我所做的
<!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
要显示图像，您需要使用<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>
随时随地看视频慕课网APP
相关分类
JavaScript