In December 2024
Answer to Question #316144 in HTML/JavaScript Web Application for siva
DOM Manipulations - 2
Use the below reference image.
Dynamically add the elements in HTML container element with id
myContainer to achieve the design.
Note
Use the checked property and classList.toggle method to achieve the functionality.
Resources
CSS Colors used:
#7a0ecc
#f2ebfe
HTML:
<body>
<div id="myContainer"></div>
</body>
it should pass:
Page should consist of only one HTML checkbox input element with the HTML attribute id having a non-empty value.
Page should consist of only one HTML label element with the HTML attribute for having a non-empty value.
When the HTML checkbox input is clicked,the text content of the HTML label element should change and shouldn't be empty.
When the HTML checkbox input is clicked,the color of the HTML main heading element should change.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulations - 2</title>
</head>
<body>
<style>
.purple{
color: #7a0ecc;
}
</style>
<div id="myContainer">
<h1 id="title">Main title</h1>
<input type="checkbox" id="change" name="change">
<label for="change" id="change-label">Change</label>
</div>
<script>
const checkbox = document.getElementById('change')
const title = document.getElementById('title')
const label = document.getElementById('change-label')
function changeTextAndColor(event) {
title.classList.toggle('purple')
if (label.innerText === "Change") {
label.innerText = "Change text!";
} else {
label.innerText = "Change";
}
}
checkbox.addEventListener('change', changeTextAndColor)
</script>
</body>
</html>
#339914 on Dec 2023
Comments
Leave a comment