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

Question #316144

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>

</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.

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

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

Comments

No comments. Be the first!

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

Resources

Comments

Leave a comment

Related Questions