ReferenceError: web3 is not defined

Question

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
      <script>
    
         window.onload = function(){
             if(typeof web3=="undefined")
             {
                 document.getElementById("metamask").innerHTML="You need to Install Metamask wallet to use this Application";
             }
      getDrugCompanies();
         }

 function getDrugCompanies(){
      try{
            var abi = [
            var contractaddress = "0xxxxxxxxxxxxxx";
            web3 = require('web3')
            myAbi = web3.eth.contract(abi);
            var myfunction = myAbi.at(contractaddress);

            myfunction.getCompanies.call(function (err, result) {
                    if (err) { document.getElementById("metamask").innerHTML = err; }
                    if (result) {

                        var i;
                        for (i = 0; i < result.length; ++i) {
                            document.getElementById("xaddress").innerHTML += result[i] + "</br>";
                            myfunction.getCompany.call(result[i], function (xerr, xxresult) {
                                if (xerr) { document.getElementById("metamask").innerHTML = xerr; }
                                if (xxresult) {
                                    document.getElementById("xcompanyname").innerHTML += xxresult + "</br>";
                                }
                            }
                            );
                        }
                    }
                }
                );
            }
            catch (err) {
                document.getElementById("metamask").innerHTML = err;
            }
        }

Answer 1

You just have to change a bit here,
try adding onload callback to the CDN and load change the code like this:

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js" onload="getDrugCompanies()" onerror="onError()"></script>

and change the import way of web3 module in your code as this:

<script>

function onError(){
    document.getElementById("metamask").innerHTML="You need to Install Metamask wallet to use this Application";
}

function getDrugCompanies(){
      try{
            var abi = [
            var contractaddress = "0xxxxxxxxxxxxxx";
            web3 = new Web3()
            myAbi = web3.eth.contract(abi);
            var myfunction = myAbi.at(contractaddress);

            myfunction.getCompanies.call(function (err, result) {
                    if (err) { document.getElementById("metamask").innerHTML = err; }
                    if (result) {

                        var i;
                        for (i = 0; i < result.length; ++i) {
                            document.getElementById("xaddress").innerHTML += result[i] + "</br>";
                            myfunction.getCompany.call(result[i], function (xerr, xxresult) {
                                if (xerr) { document.getElementById("metamask").innerHTML = xerr; }
                                if (xxresult) {
                                    document.getElementById("xcompanyname").innerHTML += xxresult + "</br>";
                                }
                            }
                            );
                        }
                    }
                }
                );
            }
            catch (err) {
                document.getElementById("metamask").innerHTML = err;
            }
        }

<script/>

In this way, you call getDrugCompanies once after complete load and call onError if there's any error loading the CDN.