I'm facing an issue with my code. I have a set of five buttons and corresponding sections. When a button is clicked, the active and active-btn classes are supposed to be added to that button as well as the corresponding section element with the same id name. The CSS styling should then change the background color of the screen for the active section. However, this functionality is not working as expected and I'm unsure if it's a styling, HTML, or JavaScript problem. Can someone please help me troubleshoot?
// JavaScript Code
const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content');
function AtATime(parameter) {
// Event listener implementation
}// CSS Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="look/look.css">
<title>Portfolio</title>
</head>
<body class="main-content">
// HTML structure
<script src="/utilities.js"></script>
</body>
</html>I've already tried using ChatGBT for solutions, but unfortunately, none of them worked.