Scribd
Upload
10 views

JS_DOM coding Questions

Uploaded by

Abishek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

JS_DOM coding Questions

Uploaded by

Abishek
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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() {
document.getElementById("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 = document.getElementsByClassName("box");
for (let i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundColor = "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 = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.fontSize = "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 = document.getElementById("content");
if (content.style.display === "none") {
content.style.display = "block";
} else {
content.style.display = "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 = document.getElementsByTagName("li");
for (let i = 0; i < items.length; i++) {
items[i].style.backgroundColor = "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() {
document.getElementById("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() {
document.querySelector(".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 = document.querySelectorAll(".box");
boxes.forEach(function(box) {
box.style.backgroundColor = "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 = document.querySelector("#section");
if (section.style.display === "none") {
section.style.display = "block";
} else {
section.style.display = "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 = document.querySelectorAll("h2");
headings.forEach(function(heading) {
heading.style.fontSize = "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() {
document.querySelector("#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 = document.querySelectorAll("ul li:nth-child(odd)");
oddItems.forEach(function(item) {
item.style.backgroundColor = "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 = document.querySelectorAll("p");
alert("Number of paragraphs: " + paragraphs.length);
}

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() {
document.querySelector("h1").textContent = "Updated Title";
let paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.textContent = "Updated Paragraph";
}); }

You might also like