Change logo at scroll dawn

[MTMEadmin]

ive been trying to write a code that would switch my logo at scroll. It sadly doesn't do anything. 

My website: prologue-studios.com

See the code:

In header.liquid gave the logo the id "logo":

<a href="{{ routes.root_url }}" class="header__heading-link link link--text focus-inset">
{%- if section.settings.logo != blank -%}
{%- assign logo_alt = section.settings.logo.alt | default: shop.name | escape -%}
{%- assign logo_height = section.settings.logo_width | divided_by: section.settings.logo.aspect_ratio -%}
{{ section.settings.logo | image_url: width: section.settings.width | image_tag:
class: 'header__heading-logo',
widths: '50, 100, 150, 200, 250, 300, 400, 500',
height: logo_height,
width: section.settings.logo_width,
alt: logo_alt,
id: 'logo'
}}
{%- else -%}
<span class="h2">{{ shop.name }}</span>
{%- endif -%}
</a>

I made a javascript file with the name "logoswitcher.js" and added this code:

document.addEventListener("DOMContentLoaded", function() {
var logo = document.getElementById("logo");
var scrollHeight = 100;
window.addEventListener("scroll", function() {
if (window.scrollY > scrollHeight) {
logo.src="https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-4.png?v=1676471382";
} (This is the logo before scroll) 

else {

logo.src="https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-3.png?v=1673102818";
} (This is the logo after scroll)
});
});t

In the body of the theme liquid file I added this code:

{{ 'logoswitcher.js' | asset_url | script_tag }}

Extra info:

In the settings I've added the logo after scroll (https://cdn.shopify.com/s/files/1/0670/2402/7915/files/TM-Icon-Logo-3.png?v=1673102818) as the brand logo. 

Help me out please