For the HTML directly below, I would like to add the contents similar to the second HTML called results using a javasript function
For the HTML directly below, I would like to add the contents similar to the second HTML called results using a javasript function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title></title>
<script src="assets/js/script.js" defer></script>
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<header>
<div class="site-title">Home</div>
<nav>
<a href="/">Home</a>
<a href="results.html">Results</a>
</nav>
</header>
function createEle(linkObj) {
const { animal, img, url } = linkObj;
const anchor = document.createElement("a");
anchor.setAttribute("href", url);
}
createEle (animalArr);
I am not sure how to finish this function as it needs to use the array to create all the elements including the section elements by calling the function once
<div class="big-hero">
<h1>Big Cats </h1>
</div>
<div class="content"></div>
</body>
</html>
Below is what the HTML should look like using the javascript function:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Results</title>
<link rel="stylesheet" href="assets/style.css" />
</head>
<body>
<div class="wrapper">
<header>
<div class="site-title">Results</div>
<nav>
<a href="/">Home</a>
<a href="results.html">Results</a>
</nav>
</header>
<div class="big-hero">
<h1>Big Cats Are Awesome</h1>
</div>
<div class="content">
<section class="Cheetah">
<a href="https://en.wikipedia.org/wiki/Cheetah" target="_blank">
<h2>Cheetah</h2>
<img src="assets/images/cheetah.jpg" alt="Cheetah" />
</a>
</section>
<section class="Leopard">
<a href="https://en.wikipedia.org/wiki/Leopard" target="_blank">
<h2>Leopard</h2>
<img src="assets/images/leopard.jpg" alt="Leopard" />
</a>
</section>
</div>
</div>
</body>
</html>
And below is the array to be used:
const animalArr = [
{
animal: "Cheetah",
img: "assets/images/cheetah.jpg",
url: "https://en.wikipedia.org/wiki/Cheetah",
},
{
animal: "Leopard",
img: "assets/images/leopard.jpg",
url: "https://en.wikipedia.org/wiki/Leopard",
},
];
The javascript function cannot use innertext/innerhtml so the function should be similar to.
Trending now
This is a popular solution!
Step by step
Solved in 2 steps with 1 images
