Change logo image and disable cache for logo

I'd like to change the logo (in my header) on a few pages (black logo to white logo)I'm using the Brine template.

I'm using this script, thanks to @Lizm :

<script>
  window.onload = function() {
    document.getElementsByClassName('Header-branding-logo')[0].src = 'https://static1.squarespace.com/static/5d0ca9426637b00001e0b944/t/5d276e25b5ed870001bf52d7/1562865189567/logo-white.png';  
  };
</script>

But not runs perfect, because in Safari, when I'm in a section with black logo and click on the section with white logo and this script, the logo appears black. If I refresh de page, the logo load well (white). So I think maybe is for the cache.

Can you help me?

URL with black logo: https://institutotramontana.squarespace.com/mision-y-visionIf you click in Programas on top, appears URL with white logo and script. But just the logo appears in white when you refresh the page: https://institutotramontana.squarespace.com/programas

Thanks

I'm on HP, Chrome. Problem like your.I don't know what the cause is, but you can use CSS to change the logo on some pages (I guess it won't have problems like using scripts, yeah, i just guess).

Oh! Do you know how can use CSS to change the logo? Thanks

What pages do you change logo?

I would like to change logo here:https://institutotramontana.squarespace.com/programashttps://institutotramontana.squarespace.com/programas-ejecutivoshttps://institutotramontana.squarespace.com/programas-profesionaleshttps://institutotramontana.squarespace.com/cursos-de-especializacion

@monicameika

/* replace with new image link */
body#collection-5d27733defe5400001f1d277 a.Header-branding:after, body#collection-5d247f18bc4a9f0001dc6198 a.Header-branding:after, body#collection-5d25d456be9cf3000173e56e a.Header-branding:after, body#collection-5d25d8ac6c3cb30001e8ac60 a.Header-branding:after{
   content: "";
   background-image: url(https://truyencv.com/templates/truyencv-green/assets/images/logo.png);
   background-repeat: no-repeat;
   background-position: center;
   width: 60px;
   height: 50px;
   display: block;
   background-size: contain;
}
body#collection-5d27733defe5400001f1d277 .Header-branding-logo, a.Header-branding:after .Header-branding-logo, body#collection-5d25d456be9cf3000173e56e .Header-branding-logo, body#collection-5d25d8ac6c3cb30001e8ac60 .Header-branding-logo {
   display: none !important;
}

Oh! That's is perfect!!!

Thank you so much :)

@monicameika You can click Accept Answer. Other members will know it worked, and they can use.