Answer to Question #316140 in HTML/JavaScript Web Application for siva

Question #316140

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.

Expert's answer

<!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>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #316140 in HTML/JavaScript Web Application for siva

Comments

Leave a comment

Related Questions