I am trying to add a script to my HTML file that changes the opacity of a div when a button is clicked.
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.
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>