How to use web3js in vanilla javascript?

Question

I used to use nodejs for working with web3js and it worked fine..But now I want to use vanilla javascript to connect with web3js. I used CDN <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>, but didn't worked though..

$(document).ready(function () {
  if (window.ethereum) {
    window.web3 = new Web3(window.ethereum);
    try {
      // ask user for permission
      ethereum.enable();
      // user approved permission
    } catch (error) {
      // user rejected permission
      console.log("user rejected permission");
    }
  } else if (window.web3) {
    window.web3 = new Web3(window.web3.currentProvider);
    // no need to ask for permission
  } else {
    window.alert(
      "Non-Ethereum browser detected. You should consider trying MetaMask!"
    );
  }
});

Output: Non-Ethereum browser detected. You should consider trying MetaMask!

PS: I have metamask installed

Answer 1

Try:

window.addEventListener('load', async () => {
    if (window.ethereum) {

    [...]