Creating a website that allows metamask connection - metamask

Question

I'm trying to create a website that can connect to metamask.
It should automatically open the metamask extension to allow the user to confirm the connection upon entering the site, however it just says "attempting to connect" and metamask never opens.
Here is my connectWallet code - there is also a button that runs connectWallet onclick
<script>
function connectWallet() {
// window.addEventListener('load', function () {
document.getElementById("demo").innerHTML = "ATTEMPTING TO CONNECT!";
if (window.ethereum) {
window.web3 = new Web3(ethereum);
ethereum.enable()
.then(() => {
console.log("Ethereum enabled");
web3.eth.getAccounts(function (err, acc) {
if (err != null) {
self.setStatus("There was an error fetching your accounts");
return;
}
if (acc.length > 0) {
console.log(acc);
walletID = acc[0]
document.getElementById("demo").innerHTML = "CONNECTED!";
getNFTsOfUser();
return;
}
});
})
.catch(() => {
console.warn('User didn\'t allow access to accounts.');
document.getElementById("demo").innerHTML = "CONNECTION REJECTED!";
waitLogin();
});
} else {
console.log("Non-Ethereum browser detected. You should consider installing MetaMask.");
document.getElementById("demo").innerHTML = "METAMASK NOT FOUND! PLEASE INSTALL OR USE A DAPP!";
}
// })
}