<style> body { background-color: lightgray; } #main-content { background-color:

ID: 3913804 • Letter: #

Question

//Update the paragraph element's content using the
//PARA1, PARA2, and PARA3 constants above.
//Use PARA1 for paragraph1, PARA2 for paragraph2,
//and PARA3 for paragraph3.
paragraph1.innerHTML =
paragraph2.innerHTML =
paragraph3.innerHTML =

//Set the class attribute for the paragraph elements.
//Use ptext1 for paragraph1, ptext2 for paragraph2,
//and ptext3 for paragraph3.
paragraph1.setAttribute("class", );
paragraph2.setAttribute( );
paragraph3.setAttribute( );

//console.log each paragraph's class attribute.
console.log(paragraph1.getAttribute());
console.log(paragraph2.getAttribute());
console.log(paragraph3.getAttribute());

//Use document.querySelectorAll to create a
//list of all the paragraphs.
var paragraphList =


//Use a for loop to loop through the paragraph list
//and console.log each paragraph.
for (){
console.log(pargraphList[]);
}
</script>

Explanation / Answer

If you have any doubts, please give me comment...

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightgray;

}

#main-content {

background-color: #ffffcd;

/* Set the body elements background color */

border: 2px solid;

/* Set the border size, style, and color for the body element */

border-radius: 10px;

margin: auto auto;

/* Set the body elements margins - Top/Bottom 0, Right/Left Auto(evenly placed between right and left side) */

padding: 15px;

font-family: sans-serif;

/* Set the default font to a generic sans-serif for the body element which is inherited by the page */

width: 45%;

/* Set the default width of the body element to 75% of the available space in the browser window */

}

h1 {

text-align: center;

}

.ptext1 {

font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;

font-size: 18px;

}

.ptext2 {

font-family: Monaco, Consolas, "Lucida Console", monospace;

font-size: 18px;

}

.ptext3 {

font-family: "Brush Script MT", cursive;

font-size: 22px;

}

</style>

</head>

<body>

<h1>Modifying the DOM with JavaScript</h1>

</div>

//PARA1, PARA2, and PARA3 are constants - Do not modify them

//These will be used to update the paragraph object elements on the page.

PARA1 = "The world has changed. I feel it in the water. I feel it in the earth. I smell it in the air. Much that once was is lost. For none now live who remember it. It began with the forging of the great rings. Three were given to the elves, immortal, wisest and fairest of all beings. Seven to the Dwarf Lords, great miners and craftsmen of the mountain halls. And nine, nine rings were gifted to the race of men, who above all else desired power. For within these rings was bound the strength and will to govern each race.";

PARA2 = "But they were all of them deceived for another ring was made. In the land of Mordor, in the fires of Mount Doom, the dark Lord Sauron forged in secretl a master ring, to control all others and into this ring, he poured his cruelty, his malice, and his will to dominate all life. One ring to rule them all.<br><br> One by one the free lands of Middle-earth fell to the power of the ring. But there were some who resisted. A last alliance of men and elves marched against the armies of Mordor and on the slopes of Mount Doom, they fought for the freedom of Middle-earth. Victory was near but the power of the ring could not be undone. It was in this moment when all hope had faded that Isildur, son of the King, took up his father's sword... Sauron, the ennemy of the free peoples of Middle-earth was defeated.<br><br>The ring passed to Isildur, who had this one chance to destroy Evil forever. But the hearts of men are easily corrupted. And the ring of power has a will of its own. It betrayed Isildur to his death. And some things that should not have been forgotten were lost. History became legend, legend became myth and for two and a half thousand years, the ring passed out of all knowledge until, when chance came, it ensnared a new bearer. The ring came to the creature Gollum who took it deep into the tunnels of the misty mountains and there it consumed him. The ring brought to Gollum unnatural long life. For five hundred years, it poisoned his mind. And in the gloom of Gollum's cave, it waited.";

PARA3 = "Darkness crept back into the forests of the world. Rumour grew of a shadow in the East, whispers of a nameless fear and the ring of power perceived its time had now come. It abandoned Gollum. But something happened then the ring did not intend. It was picked up by the most unlikely creature imaginable: a Hobbit, Bilbo Baggins of the Shire. For the times will soon come when Hobbits will shape the fortunes of all... (Galadriel)";

//get the paragraph element objects using document.getElementById

var paragraph1 = document.getElementById("p1");

var paragraph2 = document.getElementById("p2");

var paragraph3 = document.getElementById("p3");

//Update the paragraph element's content using the

//PARA1, PARA2, and PARA3 constants above.

//Use PARA1 for paragraph1, PARA2 for paragraph2,

//and PARA3 for paragraph3.

paragraph1.innerHTML = PARA1;

paragraph2.innerHTML = PARA2;

paragraph3.innerHTML = PARA3;

//Set the class attribute for the paragraph elements.

//Use ptext1 for paragraph1, ptext2 for paragraph2,

//and ptext3 for paragraph3.

paragraph1.setAttribute("class", "ptext1");

paragraph2.setAttribute("class", "ptext2");

paragraph3.setAttribute("class", "ptext3");

//console.log each paragraph's class attribute.

console.log(paragraph1.getAttribute("class"));

console.log(paragraph2.getAttribute("class"));

console.log(paragraph3.getAttribute("class"));

//Use document.querySelectorAll to create a

//list of all the paragraphs.

var paragraphList = document.querySelectorAll("p");

console.log(paragraphList);

//Use a for loop to loop through the paragraph list

//and console.log each paragraph.

for (var i = 0; i < paragraphList.length; i++) {

console.log(paragraphList[i].innerHTML);

}

</script>

</body>

</html>

Navigate

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

<style> body { background-color: lightgray; } #main-content { background-color:

Question

Explanation / Answer

Related Questions

Navigate