In December 2024
Answer to Question #316140 in HTML/JavaScript Web Application for siva
DOM Manipulations.
https://assets.ccbp.in/frontend/content/dynamic-webapps/ce-3-1-2-dom-manipulations-op.png
Dynamically add the
input elements in HTML container element with id interestsContainer to achieve the design.
Note
- For one input use the htmlFor property to add HTML for attribute.
- For other input use the setAttribute method to set the HTML attribute for.
It should pass:
The HTML container element with the id interestsContainer should consist of only two HTML checkbox input elements with the HTML attribute id having a non-empty value.
The HTML container element with the id interestsContainer should consist of only two HTML label elements with the HTML attribute for having a non-empty value.
The value of the HTML id attribute of two HTML checkbox input elements and the value of the HTML for attribute of the two HTML label elements should be the same.
JS code implementation should use the property htmlFor to set the HTML for attribute.
<!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</title>
</head>
<body>
<div id="interestsContainer">
<h1 class="title">Choose your interests</h1>
</div>
<script>
// insetr checkbox with label in container
const container = document.getElementById('interestsContainer');
const content = `<div><input type="checkbox" id="music" name="music"><label for="">Music</label></div>
<div><input type="checkbox" id="dance" name="dance"><label for="">Dance</label></div>`
container.insertAdjacentHTML('beforeend', content)
// get two labels
const musicLabel = document.getElementsByTagName('label')[0]
const danceLabel = document.getElementsByTagName('label')[1]
// set attribute for
musicLabel.htmlFor = 'music'
danceLabel.setAttribute('for', 'dance')
</script>
</body>
</html>
#339914 on Dec 2023
Comments
Leave a comment