从innerHTML获取要打印到div的数据



我的目标是有一个div,比如:Dog says Bark Bark我已经尝试了多种方法,但我无法将数组中的每一对输出到div:

const animal = [
{creature: "Dog", sound: "Bark Bark"},
{creature: "Cat", sound: "Meow Meow"},
{creature: "Horse", sound: "Neigh Neigh"},
];

function makeSoundFor(animal){
console.log([animal.creature, animal.sound].join(" "));
console.log(animal);
}
`document.getElementById("selection").innerHTML = animal;`
export { makeSoundFor };
console.log(animal.map(makeSoundFor));

<!DOCTYPE html>
<html>
<head>
<header>Animal Noises</header>
<style></style>
</head>
<div id="topline">
Click on an Animal to play the sound.
</div>
<div id="selection"></div>
<script type="module" src="script.js"></script>
</html>
const animal = [
{creature: "Dog", sound: "Bark Bark"},
{creature: "Cat", sound: "Meow Meow"},
{creature: "Horse", sound: "Neigh Neigh"},
];
animal.map(animal => `${animal.creature} says ${animal.sound}`)
const animal = [
{creature: "Dog", sound: "Bark Bark"},
{creature: "Cat", sound: "Meow Meow"},
{creature: "Horse", sound: "Neigh Neigh"},
];

function makeSoundFor(animal){
return `${animal.creature} says ${animal.sound}`
}
const selection = document.getElementById("selection")
animal.forEach(item => {
const appendDiv = document.createElement("div")
appendDiv.innerHTML = makeSoundFor(item)
selection.appendChild(appendDiv)
})
export { makeSoundFor };

最新更新