Getting an error when (attempting to) using Web3js

Question

I'm trying to connect a smart contract to a very simply front end that has html/css/js. I keep getting an error when trying to use web3 to connect - I have the code below but the terminal is giving me an error of "web3.min.js:1 Uncaught TypeError: e.toLowerCase is not a function at Object.h [as inputAddressFormatter] (web3.min.js:1) at Object.set [as address] (web3.min.js:1) at o.e (web3.min.js:1) at new o (web3.min.js:1) at index.html:87" Here's the index.html:

<title>dApp Example</title>

<link rel="stylesheet" type="text/css" href="main.css">

<script src ="./dapp-eth/web3.min.js"></script>

Athletic Club Member?

    <label for="name" class="col-lg-2 control-label">Member name</label>
    <input id="name" class="text">

    <label for="name" class="col-lg-2 control-label">Member age</label>
    <input id="name" class="text">

    <button id="button">Update Instructor</button>

</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<script>
if (typeof web3 !== 'undefined') {
    web3 = new Web3(web3.currentProvider);
    } else {
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));
    }

    //Set Account
    web3.eth.defaultAccount = web3.eth.accounts[0];

    //Set Contract Abi
    var contractAbi = [
{
    "constant": true,
    "inputs": [],
    "name": "getMember",
    "outputs": [
        {
            "name": "",
            "type": "uint256"
        },
        {
            "name": "",
            "type": "string"
        }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
},
{
    "constant": false,
    "inputs": [
        {
            "name": "_age",
            "type": "uint256"
        },
        {
            "name": "_name",
            "type": "string"
        }
    ],
    "name": "setMember",
    "outputs": [],
    "payable": false,
    "stateMutability": "nonpayable",
    "type": "function"
}

];

    //Set Contract Address
    var contractAddress = '0x0e53df94ff7b0e6c1977825b071f38a21248cbcd';

    //Set Contract
     new web3.eth.Contract(contractAbi,[contractAddress]);

    //var memberLookupContract = new web3.eth.Contract([{"constant":true,"inputs":[],"name":"getMember","outputs":[{"name":"","type":"uint256"},{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_age","type":"uint256"},{"name":"_name","type":"string"}],"name":"setMember","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"}], '0x0e53df94ff7b0e6c1977825b071f38a21248cbcd');

    contract.getMember(function(error, result) {
    if(!error) {
        $("#member").html(result[0]+' ('+result[1]+' years old)');
    } else
    console.log(error);
});

$("#button").click(function() {
    contract.setMember($("#name").val(), $("#age").val());
    $("#loader").show();
});

</script>

** Line 87 is: new web3.eth.Contract(contractAbi,[contractAddress]);

Answer 1

The correct way of setting contract:

//Set Contract
new web3.eth.Contract(contractAbi, contractAddress);

Another way you can try is:

var contractAbi = web3.eth.contract('YOUR ABI')  
var mycontract = contractAbi.at('YOUR CONTRACT ADDRESS')

Now calling contract functions using mycontract.

mycontract.getMember(function(error, result) {
    if(!error) {
        $("#member").html(result[0]+' ('+result[1]+' years old)');
    } else
    console.log(error);
});