'How to change opacity of a div on button click using JS? [closed]

I am trying to add a script to my HTML file that changes the opacity of a div when a button is clicked.

This is the HTML file

This is the CSS file

This is my function

Essentially what I'm trying to achieve is the div that is currently set to 0 opacity, will be change to 1 opacity on the click of the button. Currently this is not working, and I am relatively new to incorporating JS in and HTML file. Any tips would be greatly appreciated.

javascripthtmlcssonclickopacity


Solution 1:[1]

Here's a simple example using JavaScript embedded in HTML. Make sure you're using an event listener that listens for the click of your button.

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h1 style="opacity: 0;">About Me</h1>
    <button>
      Show
    </button>
    <script>
      var button = document.querySelector('button');
      button.addEventListener('click', function() {
        var h1 = document.querySelector('h1');
        h1.style.opacity = 1;
      });
    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jon Reiland

Related Questions