how would i code this with javascript? 5 Create an aside element with the ID “ke
ID: 3710547 • Letter: H
Question
how would i code this with javascript?
5
Create an aside element with the ID “keywords” and containing an h1 heading with the text “Keyword List”.
6
Create an ol element and append it to the keywords aside element.
my code:
"use strict";
/*
New Perspectives on HTML5, CSS3 and JavaScript 6th Edition
Tutorial 12
Review Assignment
Author:
Date:
Filename: bc_keys.js
Functions
=========
findKeyWords()
Locate the keywords in the article indicated by the <dfn> tag
and add those keywords in alphabetical order to a keyword box.
makeKeyStyles()
Create an embedded style sheet for the keyword box.
replaceWS(textStr)
Replaces occurences of one or more consecutive white space
characters with the _ character.
*/
/* functions when the page is loaded */
window.addEventListener ("load", findKeyWords);
window.addEventListener ("load", makeKeyStyles);
findKeyWords() {
}
/* Supplied Functions */
function replaceWS(textStr) {
var revText = textStr.replace(/s+/g,"_");
return revText;
}
Explanation / Answer
I have done what I understood, if you need any other, please give me comment...
<!DOCTYPE html>
<html>
<head></head>
<body>
<aside id="keywords">
<h1>Keyword List</h1>
</aside>
<article>
<dfn>word1</dfn>
<dfn>word2</dfn>
<dfn>word3</dfn>
<dfn>word4</dfn>
</article>
</body>
<script type="text/javascript">
"use strict";
/*
New Perspectives on HTML5, CSS3 and JavaScript 6th Edition
Tutorial 12
Review Assignment
Author:
Date:
Filename: bc_keys.js
Functions
=========
findKeyWords()
Locate the keywords in the article indicated by the <dfn> tag
and add those keywords in alphabetical order to a keyword box.
makeKeyStyles()
Create an embedded style sheet for the keyword box.
replaceWS(textStr)
Replaces occurences of one or more consecutive white space
characters with the _ character.
*/
/* functions when the page is loaded */
window.addEventListener("load", findKeyWords);
window.addEventListener("load", makeKeyStyles);
function findKeyWords() {
var keywords = document.getElementsByTagName("dfn");
var str ="<ol>";
for(var i=0; i<keywords.length; i++){
var kw = replaceWS(keywords[i].innerHTML);
str +="<li>"+kw+"</li>";
}
str += "</ol>";
document.getElementById("keywords").innerHTML+=str;
}
function makeKeyStyles(){
document.getElementById("keywords").style.border="1px solid red";
document.getElementById("keywords").style.padding="10px";
document.getElementById("keywords").style.background="yellow";
}
/* Supplied Functions */
function replaceWS(textStr) {
var revText = textStr.replace(/s+/g, "_");
return revText;
}
</script>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.