JavaScript: Set the background color of a paragraph
JavaScript DOM: Exercise-3 with Solution
Write a JavaScript program to set the background color of a paragraph.
Sample Solution: -
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Set the background color of a paragraph</title>
</head>
<body>
<input type="button" value="Click to set paragraph background color" onclick="set_background()">
<p>w3resource JavaScript Exercises</p>
<p>w3resource PHP Exercises</p>
</body>
</html>
JavaScript Code:
function set_background() {
docBody = document.getElementsByTagName("body")[0];
//Get all the p elements that are descendants of the body
myBodyElements = docBody.getElementsByTagName("p");
// get the first p elements
myp1 = myBodyElements[0];
myp1.style.background = "rgb(255,0,0)";
// get the second p elements
myp2 = myBodyElements[1];
myp2.style.background = "rgb(255,255,0)";
}
Sample Output:
Flowchart:
Live Demo:
See the Pen javascript-dom-exercise-3 by w3resource (@w3resource) on CodePen.
Improve this sample solution and post your code through Disqus
Previous: Write a JavaScript function to get the values of First and Last name of the following form.
Next: Write a JavaScript function to get the value of the href, hreflang, rel, target, and type attributes of the specified link.
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
JavaScript: Tips of the Day
How to insert an item into an array at a specific index (JavaScript)?
What you want is the splice function on the native array object.
arr.splice(index, 0, item); will insert item into arr at the specified index (deleting 0 items first, that is, it's just an insert). In this example we will create an array and add an element to it into index 2:
var arr = []; arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; arr[3] = "Kai Jim"; arr[4] = "Borge"; console.log(arr.join()); arr.splice(2, 0, "Lene"); console.log(arr.join());
Ref: https://bit.ly/2BXbp04
- New Content published on w3resource:
- HTML-CSS Practical: Exercises, Practice, Solution
- Java Regular Expression: Exercises, Practice, Solution
- Scala Programming Exercises, Practice, Solution
- Python Itertools exercises
- Python Numpy exercises
- Python GeoPy Package exercises
- Python Pandas exercises
- Python nltk exercises
- Python BeautifulSoup exercises
- Form Template
- Composer - PHP Package Manager
- PHPUnit - PHP Testing
- Laravel - PHP Framework
- Angular - JavaScript Framework
- Vue - JavaScript Framework
- Jest - JavaScript Testing Framework