Please read the entire thing carefully, it\'s been posted once and the answer wa
ID: 3689669 • Letter: P
Question
Please read the entire thing carefully, it's been posted once and the answer was very very incorrect...it has 5 paragraphs in it that need to change as listed below.
This is a JavaScript assignment. Write an HTML5 page that displays five paragraphs of text.
The first two paragraphs must have id attributes only.
The next two paragraphs must have class attributes only.
The last paragraph must have no attributes.
Using JavaScript, do the following:
Center align the first paragraph.
Right align the second paragraph.
Set the text of the third paragraph to be red on yellow background.
Set the text of the fourth paragraph to be cyan on blue background.
Every 3 seconds, change the background color of the fifth paragraph cycling through the colors red, white, blue, black, green and orange.
Add a button that when clicked will add a sixth paragraph to the document. Ensure that the paragraph is only added once.
Please take your time...I need this to be done right the first time. I thumbs down if it's wrong or unusable.
Explanation / Answer
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Change Paragraph Style</title>
<script>
// this function call on body load
function myFunction() {
// Text align center of first paragraph.
document.getElementById("first").style.textAlign = "center";
// Text align right of second paragraph.
document.getElementById("second").style.textAlign = "right";
// Change text color and backgroung color of third paragraph.
elements = document.getElementsByClassName("third");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor="#FFFF00";
elements[i].style.color="#FF0000"
}
// Change text color and backgroung color of fourth paragraph.
elements_second = document.getElementsByClassName("fourth");
for (var i = 0; i < elements_second.length; i++) {
elements_second[i].style.backgroundColor="blue";
elements_second[i].style.color="#00FFFF"
}
// Call changeColor() for fifth paragraph background color with in every 3 second
changeColor(1);
}
// This function use for fifth paragraph background color with in every 3 second
function changeColor(count){
// define color array. modified array color according to your requirement
colors = new Array('red', 'white', 'blue', 'black', 'green', 'orange');
// check current array
count %= colors.length;
// get paragraph details
var change_color_part = document.getElementsByTagName("p");
// change background color of fifth paragraph
change_color_part[4].style.backgroundColor=colors[count];
// call again after 3 second with next array color
setTimeout("changeColor("+(count+1)+")", 3000);
}
// This function use for add new paragraph
function addNew(){
// get paragraph details here
var new_pag = document.getElementsByTagName("p");
// check paragraph already added or not. if already added then show alert message.
// If not added then add new paragraph after fifth paragraph.
if(new_pag.length < 6){
var part = '<p> This is sixth paragraph.</p>';
new_pag[4].outerHTML = new_pag[4].outerHTML + part;
}else{
alert('Already added sixth paragraph.');
}
}
</script>
</head>
<body>
<!-- First paragraph start here-->
<p id="first"> First paragraph with Center align. </p>
<!-- First paragraph end here-->
<!-- Second paragraph start here-->
<p id="second"> Second paragraph with Center Right. </p>
<!-- Second paragraph end here-->
<!-- Third paragraph start here-->
<p class="third"> Third paragraph with text color red and yellow background. </p>
<!-- Third paragraph end here-->
<!-- Fourth paragraph start here-->
<p class="fourth"> Fourth paragraph with text color cyan and blue background. </p>
<!-- Fourth paragraph end here-->
<!-- Fifth paragraph start here-->
<p> Fifth paragraph with change color every 3 second. </p>
<!-- Fifth paragraph end here-->
<!-- Add new paragraph button code here-->
<input type="button" name="add" value="Add New Paragraph"/>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.