<script defer>
       const toggle = document.getElementById('moonToggle')
       const body = document.querySelector('body');
       const footer = document.getElementsByClassName('footer');
   
   
       toggle.addEventListener('click', function() {
           this.classList.toggle('bi-moon-fill');
           if (this.classList.toggle('bi-brightness-high-fill')) {
               body.style.background = '#112B3C';
               body.style.color = '#DDDDDD';
               body.style.transition = '1s';
               footer.style.background = '#DDDDDD';
   
           } else {
               toggle.class = "bi-brightness-high-fill";
               body.style.background = 'white';
               body.style.color = 'black';
               body.style.transition = "1s";
               footer.style.background = "#112B3C";
           };
       });
</script>

I am able to change my background for body with the bootstrap icon I've added but I can't change the background of footer.