Please note, this is a STATIC archive of website www.w3resource.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
w3resource

JavaScript DOM - Exercises, Practice, Solution

JavaScript DOM [13 exercises with solution]

[An editor is available at the bottom of the page to write and execute the scripts.]

1. Here is a sample html file with a submit button. Now modify the style of the paragraph text through javascript code. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS DOM paragraph style</title>
</head> 
<body>
<p id ='text'>JavaScript Exercises - w3resource</p> 
<div>
<button id="jsstyle"
onclick="js_style()">Style</button>
</div>
</body>
</html>

Clicking on the button the font, font size, and color of the paragraph text will be changed.
Click me to see the solution

2. Write a JavaScript function to get the values of First and Last name of the following form. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>Return first and last name from a form - w3resource</title>
</head><body>
<form id="form1" onsubmit="getFormvalue()">
First name: <input type="text" name="fname" value="David"><br>
Last name: <input type="text" name="lname" value="Beckham"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Click me to see the solution

3. Write a JavaScript program to set the background color of a paragraph. Go to the editor
Click me to see the solution

4. Here is a sample html file with a submit button. Write a JavaScript function to get the value of the href, hreflang, rel, target, and type attributes of the specified link. Go to the editor

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
</head>
<body>
<p><a id="w3r" type="text/html" hreflang="en-us" rel="nofollow" target="_self" href="https://www.w3resource.com/">w3resource</a></p>
<button onclick="getAttributes()">Click here to get  attributes value</button>
</body></html>

Click me to see the solution

5. Write a JavaScript function to add rows to a table. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>Insert row in a table - w3resource</title>
</head><body>
<table id="sampleTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
</table><br>
<input type="button" onclick="insert_Row()" value="Insert row"> 
</body></html>

Click me to see the solution

6. Write a JavaScript function that accept row, column, (to identify a particular cell) and a string to update the content of that cell. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
</head><body>
<table id="myTable" border="1">
<tr><td>Row1 cell1</td>
<td>Row1 cell2</td></tr>
<tr><td>Row2 cell1</td>
<td>Row2 cell2</td></tr>
<tr><td>Row3 cell1</td>
<td>Row3 cell2</td></tr>
</table><form>
<input type="button" onclick="changeContent()" value="Change content">
</form></body></html>

Click me to see the solution

7. Write a JavaScript function that creates a table, accept row, column numbers from the user, and input row-column number as content (e.g. Row-0 Column-0) of a cell. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Change the content of a cell</title>
<style type="text/css">
body {margin: 30px;}
</style>  
</head><body>
<table id="myTable" border="1">
</table><form>
<input type="button" onclick="createTable()" value="Create the table">
</form></body></html>

Click me to see the solution

8. Write a JavaScript program to remove items from a dropdown list. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<title>Remove items from a dropdown list</title>
</head><body><form>
<select id="colorSelect">
<option>Red</option>
<option>Green</option>
<option>White</option>
<option>Black</option>
</select>
<input type="button" onclick="removecolor()" value="Select and Remove">
</form>
</body>
</html>

Click me to see the solution

9. Write a JavaScript program to count and display the items of a dropdown list, in an alert window. Go to the editor
Sample HTML file : 

<!DOCTYPE html>
<html><head>
<meta charset=utf-8 />
<style type="text/css">
body {margin: 30px;}
</style>   
<title>Count and display items of a dropdown list - w3resource</title>
</head><body><form>
Select your favorite Color :
<select id="mySelect">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>White</option>
</select>
<input type="button" onclick="getOptions()" value="Count and Output all items">
</form>
</body>
</html>

Click me to see the solution

10. Write a JavaScript program to calculate the volume of a sphere. Go to the editor
Sample Output of the form :

volume sphere html form

Click me to see the solution

11. Write a JavaScript program to display a random image (clicking on a button) from the following list. Go to the editor
Sample Image information :

"https://farm4.staticflickr.com/3691/11268502654_f28f05966c_m.jpg", width: "240", height: "160"
"https://farm1.staticflickr.com/33/45336904_1aef569b30_n.jpg", width: "320", height: "195"
"https://farm6.staticflickr.com/5211/5384592886_80a512e2c9.jpg", width: "500", height: "343"

Click me to see the solution

12. Write a JavaScript program to highlight the bold words of the following paragraph, on mouse over a certain link. Go to the editor
Sample link and text :
[On mouse over here bold words of the following paragraph will be highlighted]
We have just started this section for the users (beginner to intermediate) who want to work with various JavaScript problems and write scripts online to test their JavaScript skill.
Click me to see the solution

13. Write a JavaScript program to get the width and height of the window (any time the window is resized). Go to the editor
Click me to see the solution

More to Come !

* To run the code mouse over on Result panel and click on 'RERUN' button.*

Live Demo:

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.


Do not submit any solution of the above exercises at here, if you want to contribute go to the appropriate exercise page.



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