Scribd
Upload
12 views

JS_DOM coding Questions

Uploaded by

Abishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

JS_DOM coding Questions

Uploaded by

Abishek
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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