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".

Click to see solution

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>

Click to see solution

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.

Click to see solution

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"

Click to see solution

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.

Click to see solution

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);
  }
}