Buttons not working after migrating from Github pages to Netlify

Support
, ,
1

I was hosting my site on Github Pages and just switched to Netlify and change the DNS settings to point to Netlify (from Namecheap). I deployed it from my git repo (after removing it from pages).

The site is live pwenterprises.netlify.app and deployment worked fine but none of the buttons on my site are working. This wasn’t an issue in my local machine (using vis studio) or previous site on github.

I check the console and getting this error for some reason:
Uncaught TypeError: Cannot read properties of null (reading ‘getElementsByClassName’)

in my script.js:

// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById(“btn-container”);
var btns = btnContainer.getElementsByClassName(“btn”);
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener(“click”, function () {
var current = document.getElementsByClassName(“active”);
current[0].className = current[0].className.replace(" active", “”);
this.className += " active";
});
}

Anyone have this issue before

2

The “some reason” is that there is no element with an id of btn-container in the page.

To break that down in far too much detail…

Since there is no #btn-container in the page, your line:

var btnContainer = document.getElementById("btn-container");

Results in btnContainer being null

The following line:

var btns = btnContainer.getElementsByClassName("btn");

Is effectively:

var btns = null.getElementsByClassName("btn");

There is no .getElementsByClassName method on null

So you get the error:

Uncaught TypeError: Cannot read properties of null (reading 'getElementsByClassName')
3

Hello Nathan,

Thanks for your response. But I haven’t changed any of the code so I’m not sure why this is an error now? It’s been like this for the past year.

4

@pwe That largely doesn’t matter.

The end result is that there is an error.

It may not be the main error you’re encountering, but it is an error and probably a good place to start, since it’s what you questioned.

5

@pwe I also note that if you start looking at the site from another page, for example:

https://pwenterprises.netlify.app/about

That there is a different error in the console:

image
image1089×114 25.2 KB

But that the links on the page do work.

6

Could the issue be that the transfer from Github to Netlify is still pending? I can’t even access it from incognito sometimes.

image
image1920×629 42.7 KB

7

@pwe No, the issue is the JavaScript is broken.

8

I commented out the javascript and no error but buttons still dont work. So I might have been having that issue before but it didnt affect it.

9

@pwe See:

As predicted you’ve now determined that specific error isn’t causing your main error, great work.

Now you just keep debugging.

Here’s a pointer, if I were you, I’d take a look at the code here:

image
image680×616 124 KB

It’s running on the home page, and it hijacks the behaviour of links and applies e.preventDefault()

It is not running on other pages due to the line before it failing:

image

10

Okay but I know I mentioned this but the issue started happening when I migrated to netlify. I had 0 errors using Github Pages.

Any other ideas?

11

I know you mentioned it, I’m saying again it’s largely irrelevant.

You can’t debug from that perspective, you can only debug from what you can actually see, the errors that are occurring, by debugging them you may determine some other “root cause”.

None.

While you say you’ve changed nothing, something may have changed.

The easiest way to figure it out, is to debug it.

Note that Netlify is only “hosting the site” it’s not “running the site”.

The browser is running the site, and it’s in the browser that the errors are occuring.

If you really wanted to get pedantic, you could take the files from the result of a build on Github and the result of a build on Netlify and do a diff on the files.

If there is some difference between the output of your build running on the two services, that would reveal it.

12

Issue fixed. My steps:

  • delete project and recreate it from git
  • comment out that sticky header

The reason for the issue is still not resolved but something was conflicting with the js. works for now so will figure it out another day

13

^ This would have been unnecessary

^ This has ‘fixed it’ but only because it’s “turned off” the code that’s broken

if (href.endsWith(".html") || href.startsWith("http")) {
  window.location.href = href;
}

^ This is the cause for your links not working

As I’d screenshot, that menu logic hijacks the behavior of links and then only navigates to them when they either end with .html or start with http.

That won’t be playing nice with Netlify’s “Pretty URL’s” feature:

Netlify’s Pretty URLs feature, which is enabled by default for sites and standardizes your URLs.
When Pretty URLs are enabled, Netlify forwards paths like /about to /about/ (a common practice in static sites and single-page apps) and rewrites paths like /about.html to /about/.

So your links don’t contain either .html or http, (e.g. /services/import-export), and thus aren’t being handled at all.

You just need to adjust your JavaScript to be more robust.

14

Ah good catch. I forgot that netlify removes those.