Looking to add some interactivity to your webpage? I've been attempting to create a button that changes the background color when clicked using JavaScript and CSS, but haven't had any luck so far. Here is the code I've been working with:
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<style>
.bgcolor1{
background-color:black;
}
.bgcolor2{
background-color:grey;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="bgcolor1">
<button onclick="this.className = 'bgcolor2'">Change COLOUR</button>
</body>
</html>
Unfortunately, despite setting up the code so that clicking the button should change the class to "bgcolor2" and update the background color to grey, it seems to only affect the button itself rather than the entire document. Any suggestions on how to get this working properly or spot what might be wrong with the code? Thanks for your help!