JavaScript/Adding elements/Exercises
Topic: Creating elements and attributes
We use a nearly empty HTML page for the exercises.
<!DOCTYPE html><html><head><script>functionshow(){"use strict";// ...}</script></head><bodyid="body"style="margin:2em"><h1>The magic creator</h1><buttonid="buttonShow"onclick="show()">Start</button></body></html>1. Modify the function show.
- It creates a paragraph <p> with the content "One of my children".
functionshow(){"use strict";// create the paragraphconstp=document.createElement("p");p.innerHTML="One of my children";// integrate the paragraph into the bodyconstbody=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>functionshow(){"use strict";// create the listconstul=document.createElement("ul");// create and add the itemsconstli_1=document.createElement("li");li_1.innerHTML="Albert";ul.appendChild(li_1);constli_2=document.createElement("li");li_2.innerHTML="Betty";ul.appendChild(li_2);constli_3=document.createElement("li");li_3.innerHTML="Charles";ul.appendChild(li_3);// add the list to the bodyconstbody=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.
functionshow(){"use strict";// start with a captionconstp=document.createElement("p");p.innerHTML="We offer many products:";constbody=document.getElementById("body");body.appendChild(p);// define your products; in production, this may result from// a database queryconstproductsArray=["Ice creme","Chocolate","Coffe"];// start of the listconstul=document.createElement("ul");// loop over the list itemsfor(leti=0;i<productsArray.length;i++){// create and add the itemsconstli=document.createElement("li");li.innerHTML=productsArray[i];ul.appendChild(li);}// add the list to the bodybody.appendChild(ul);}4. Modify the function showin a way that it adds a particular image to the HTML page.
<p></p><imgsrc="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"
functionshow(){"use strict";// an empty paragraphconstp=document.createElement("p");constbody=document.getElementById("body");body.appendChild(p);constimg=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 bodybody.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.
functionshow(){"use strict";// try to locate the inserted imageconstoldImg=document.getElementById("newImage");if(oldImg){// it exists, reduce its sizeconstsize=oldImg.width*0.9;oldImg.setAttribute("width",size);}else{// it doesn't exist, create itconstp=document.createElement("p");constbody=document.getElementById("body");body.appendChild(p);constimg=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 bodybody.appendChild(img);}}