DApps using Ethereum and Web3 js

Question

I am writing very basic sample contract to get the name of instructor on browser using Ganache. Contract looks fine but web3.js page is not responding .

Contract code :

pragma solidity ^0.5.0;

contract Coursetro {

   string fName;
   uint age;

   function setInstructorName(string memory _fName) public {
       fName = _fName;

   }

   function getInstructorName() public view returns (string memory) {
       return (fName);
   }

}

Web3.js code

Document

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

<script src="./node_modules/web3-bzz/dist/web3-bzz.min"> alert("hello");</script>

    <h1>Coursetro Instructor</h1>

    <h2 id="instructor"></h2>

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

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


</div>

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

<script>
    alert("hello");
    if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
    } else {
        // set the provider you want from Web3.providers
        web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
    }
        web3.eth.defaultAccount = web3.eth.accounts[0];

        //set Abi
        var contractAbi=[
            {
                "constant": false,
                "inputs": [
                    {
                        "name": "_fName",
                        "type": "string"
                    }
                ],
                "name": "setInstructorName",
                "outputs": [],
                "payable": false,
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "constant": true,
                "inputs": [],
                "name": "getInstructorName",
                "outputs": [
                    {
                        "name": "",
                        "type": "string"
                    }
                ],
                "payable": false,
                "stateMutability": "view",
                "type": "function"
            }
        ];

        //set contract Addredd
        var contractAddress ='0x87de2ec9103dcfeb73f2dfc5c40aba5772828793';

        var contract = web3.eth.contract(contractAbi).at(contractAddress);
        contract.fname(function(err,fname)){
            if(!error)
        {
            $("#instructor").html(fname);
            console.log(result);
        }
    else
        console.error(error);
});

$("#button").click(function() {

    contract.setInstructor($("#fname").val());
});
</script>