Hands on Practice - JavaScript
Sample coding questions using getElemens in javascript
Fill out the missing code in the following coding Questions.
1. Write a JavaScript function that changes the text inside an HTML element with a specific
id when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Change Text</title> </head>
<body>
<h1 id="heading">Hello, World!</h1>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the text of the <h1> element should change from "Hello,
World!" to "Welcome to JavaScript!".
Solution:
function changeText() {
[Link]("heading").innerHTML = "Welcome to JavaScript!";
}
2. Write a JavaScript function that changes the background color of all elements with the
class name box to yellow.
HTML:
<!DOCTYPE html>
<html> <head> <title>Change Background</title> </head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<button onclick="changeBackgroundColor()">Change Background</button>
<script>
function changeBackgroundColor() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the background color of all elements with the class box
should change to yellow.
Solution:
function changeBackgroundColor() {
let boxes = [Link]("box");
for (let i = 0; i < [Link]; i++) {
boxes[i].[Link] = "yellow"; } }
3. Write a JavaScript function that changes the font size of all <p> elements to 20px when a
button is clicked.
<!DOCTYPE html>
<html> <head> <title>Change Font Size</title> </head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<button onclick="changeFontSize()">Change Font Size</button>
<script>
function changeFontSize() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, all the paragraphs should have their font size changed to
20px.
Solution:
function changeFontSize() {
let paragraphs = [Link]("p");
for (let i = 0; i < [Link]; i++) {
paragraphs[i].[Link] = "20px";
} }
4. Write a JavaScript function that toggles the visibility of an element with a specific id
when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Toggle Visibility</title> </head>
<body>
<div id="content">This is some content.</div>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<script>
function toggleVisibility() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the content of the div should toggle between being visible
and hidden.
Solution:
function toggleVisibility() {
let content = [Link]("content");
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none"; } }
5. Write a JavaScript function that highlights all <li> elements by changing their background
color to lightblue when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Highlight List Items</title> </head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button onclick="highlightItems()">Highlight Items</button>
<script>
function highlightItems() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, all the <li> elements should have their background color
changed to lightblue.
Solution:
function highlightItems() {
let items = [Link]("li");
for (let i = 0; i < [Link]; i++) {
items[i].[Link] = "lightblue";
} }
6. Write a JavaScript function that updates the value of an input field when a button is
clicked.
<!DOCTYPE html>
<html> <head> <title>Update Input</title> </head>
<body>
<input type="text" id="myInput" value="Initial Value">
<button onclick="updateInputValue()">Update Value</button>
<script>
function updateInputValue() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the value of the input field should change to "Updated
Value".
Solution:
function updateInputValue() {
[Link]("myInput").value = "Updated Value"; }
Coding Questions using QuerySelector
7. Write a JavaScript function that changes the text content of a <p> element with the
class name description when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Change Text</title> </head>
<body>
<p class="description">Original description text.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the text of the <p> element should change to "New
description text."
Solution:
function changeText() {
[Link](".description").textContent = "New description text."; }
8. Write a JavaScript function that changes the background color of all elements with the
class box to green when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Change Background</title> </head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<button onclick="changeBackground()">Change Background</button>
<script>
function changeBackground() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the background color of all elements with the class box
should change to green.
Solution:
function changeBackground() {
let boxes = [Link](".box");
[Link](function(box) {
[Link] = "green";
}); }
9. Write a JavaScript function that toggles the display of a section (using id="section")
between visible and hidden when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Toggle Section</title> </head>
<body>
<div id="section">This is a toggleable section.</div>
<button onclick="toggleSection()">Toggle Section</button>
<script>
function toggleSection() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the section should toggle between visible and hidden.
Solution:
function toggleSection() {
let section = [Link]("#section");
if ([Link] === "none") {
[Link] = "block";
} else {
[Link] = "none";
} }
10. Write a JavaScript function that changes the font size of all <h2> elements to 30px
when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Change Font Size</title> </head>
<body>
<h2>Heading 1</h2>
<h2>Heading 2</h2>
<h2>Heading 3</h2>
<button onclick="changeFontSize()">Change Font Size</button>
<script>
function changeFontSize() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, all <h2> elements should have their font size changed to 30px.
Solution:
function changeFontSize() {
let headings = [Link]("h2");
[Link](function(heading) {
[Link] = "30px";
}); }
11. Write a JavaScript function that updates the value of an input field with
id="inputField" when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Update Input Value</title> </head>
<body>
<input type="text" id="inputField" value="Old Value">
<button onclick="updateValue()">Update Value</button>
<script>
function updateValue() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the value of the input field should change to "New
Value."
Solution:
function updateValue() {
[Link]("#inputField").value = "New Value"; }
12. Write a JavaScript function that highlights all odd-numbered list items in an
unordered list by changing their background color to lightgray.
<!DOCTYPE html>
<html> <head> <title>Highlight Odd Items</title> </head>
<body> <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li> </ul>
<button onclick="highlightOddItems()">Highlight Odd Items</button>
<script>
function highlightOddItems() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the odd-numbered list items (1, 3, 5) should have their
background color changed to lightgray.
Solution:
function highlightOddItems() {
let oddItems = [Link]("ul li:nth-child(odd)");
[Link](function(item) {
[Link] = "lightgray";
}); }
13. Write a JavaScript function that counts the number of <p> elements in the document
and displays the result in an alert.
<!DOCTYPE html>
<html> <head> <title>Count Paragraphs</title> </head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button onclick="countParagraphs()">Count Paragraphs</button>
<script>
function countParagraphs() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, an alert should display the total number of paragraphs on
the page.
Solution:
function countParagraphs() {
let paragraphs = [Link]("p");
alert("Number of paragraphs: " + [Link]);
}
14. Write a JavaScript function that changes the first <h1> element's text to "Updated Title"
and changes the text of all <p> elements to "Updated Paragraph" when a button is clicked.
<!DOCTYPE html>
<html> <head> <title>Modify Elements</title> </head>
<body>
<h1>Main Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<button onclick="modifyElements()">Modify Elements</button>
<script>
function modifyElements() {
// Write your code here
}
</script> </body> </html>
Expected Output:
• When the button is clicked, the <h1> element should display "Updated Title", and all
<p> elements should display "Updated Paragraph."
Solution:
function modifyElements() {
[Link]("h1").textContent = "Updated Title";
let paragraphs = [Link]("p");
[Link](function(paragraph) {
[Link] = "Updated Paragraph";
}); }