JavaScript/Adding elements/Exercises
Topic: Creating elements and attributes
We use a nearly empty HTML page for the exercises.
<!DOCTYPE html>
<html>
<head>
<script>
function show() {
"use strict";
// ...
}
</script>
</head>
<body id="body" style="margin:2em">
<h1>The magic creator</h1>
<button id="buttonShow" onclick="show()">Start</button>
</body>
</html>
1. Modify the function show.
- It creates a paragraph <p> with the content "One of my children".
function show() {
"use strict";
// create the paragraph
const p = document.createElement("p");
p.innerHTML = "One of my children";
// integrate the paragraph into the body
const body = document.getElementById("body");
body.appendChild(p);
}
2. Modify the function showin a way that it adds a list to the HTML page.
<ul>
<li>Albert</li>
<li>Betty</li>
<li>Charles</li>
</ul>
function show() {
"use strict";
// create the list
const ul = document.createElement("ul");
// create and add the items
const li_1 = document.createElement("li");
li_1.innerHTML = "Albert";
ul.appendChild(li_1);
const li_2 = document.createElement("li");
li_2.innerHTML = "Betty";
ul.appendChild(li_2);
const li_3 = document.createElement("li");
li_3.innerHTML = "Charles";
ul.appendChild(li_3);
// add the list to the body
const body = document.getElementById("body");
body.appendChild(ul);
}
3. Modify the function showin a way that it adds a list to the HTML page. Implement it in a way that the list may vary in length and in its content over time.
<p>We offer many products:</p>
<ul>
<!-- The list of products may change -->
<li>Ice creme</li>
<li>Chocolate</li>
<li>Coffee</li>
</ul>
To reach the goal of variable length, you must use a loop over the offered products. Save your product list in an array and loop over it.
function show() {
"use strict";
// start with a caption
const p = document.createElement("p");
p.innerHTML = "We offer many products:";
const body = document.getElementById("body");
body.appendChild(p);
// define your products; in production, this may result from
// a database query
const productsArray = ["Ice creme", "Chocolate", "Coffe"];
// start of the list
const ul = document.createElement("ul");
// loop over the list items
for (let i = 0; i < productsArray.length; i++) {
// create and add the items
const li = document.createElement("li");
li.innerHTML = productsArray[i];
ul.appendChild(li);
}
// add the list to the body
body.appendChild(ul);
}
4. Modify the function showin a way that it adds a particular image to the HTML page.
<p></p>
<img src="https://en.wikibooks.org/static/images/footer/wikimedia-button.png"/>
Change the image's size by adding the attribute width with a value of "300px". Mark the image with a unique identifier, e.g., "newImage"
function show() {
"use strict";
// an empty paragraph
const p = document.createElement("p");
const body = document.getElementById("body");
body.appendChild(p);
const img = document.createElement("img");
img.setAttribute("src", "https://en.wikibooks.org/static/images/footer/wikimedia-button.png");
img.setAttribute("width", "300px");
img.setAttribute("id", "newImage");
// add the image to the body
body.appendChild(img);
}
5. Extend the previous example. After the image is added to the page, the behavior changes. The second and all further clicks on the button reduce the image's size by 10% - without adding another button.
function show() {
"use strict";
// try to locate the inserted image
const oldImg = document.getElementById("newImage");
if (oldImg) {
// it exists, reduce its size
const size = oldImg.width * 0.9;
oldImg.setAttribute("width", size);
} else {
// it doesn't exist, create it
const p = document.createElement("p");
const body = document.getElementById("body");
body.appendChild(p);
const img = document.createElement("img");
img.setAttribute("src", "https://en.wikibooks.org/static/images/footer/wikimedia-button.png");
img.setAttribute("id", "newImage");
img.setAttribute("width", "300px");
// add the image to the body
body.appendChild(img);
}
}