1.
Style Paragraph
Here is a sample html file with a submit button. Now modify the style of the paragraph
text through javascript code.
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.
2. Get Form Values
Write a JavaScript function to get the values of First and Last names of the following
form.
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>
3. Paragraph Background Color
Write a JavaScript program to set paragraph background color.
4. Get Link Attributes
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.
<!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="[Link]
<button onclick="getAttributes()">Click here to get attributes value</button>
</body></html>
5. Add Table Rows
Write a JavaScript function to add rows to a table.
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>
6. Update Table Cell
Write a JavaScript function that accepts a row, column (to identify a particular cell) and a
string to update the cell's contents.
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>
7. Create Table Dynamically
Write a JavaScript function to create a table, accept row and column numbers, and input
row-column numbers as cell content (e.g. Row-0 Column-0).
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>
8. Remove Dropdown Item
Write a JavaScript program to remove items from a drop-down list.
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>
9. Count Dropdown Items
Write a JavaScript program to count and display dropdown list items in an alert window.
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>
10. Sphere Volume Calculator
Write a JavaScript program to calculate sphere volume.
Sample Output of the form :
11. Random Image Display
Write a JavaScript program to display a random image (clicking on a button) from the
following list.
Sample Image information :
"[Link] width: "240",
height: "160"
"[Link] width: "320", height:
"195"
"[Link] width: "500", height:
"343"
12. Highlight Bold on Hover
Write a JavaScript program to highlight the bold words of the following paragraph, on
mouse over a certain link.
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.
13. Window Resize Dimensions
Write a JavaScript program to get the window width and height (any time the window is
resized).