Error when calling approve function from a button

Question

I have these 2 functions

function getData() {
  var a = document.getElementById("amount").value;
  var b = a * 0.1;
  var c = a - b;
  document.getElementById("receive").innerHTML = c;
};

function approve(){
  if (typeof window !== 'undefined' && typeof window.web3 !== 'undefined') {
  // We are in the browser and metamask is running.
  web3 = new Web3(window.web3.currentProvider.enable());
}
  var accounts= web3.eth.getAccounts();
  var a = document.getElementById("amount").value;
  var agiContract = new web3.eth.Contract(agiabi,agiContractAddress);
  agiContract.methods.approve("0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720", a).send({ from: accounts[0] });
};

The function getData is getting an input amount from the User and this input amount is than passed into function approve():

With the approve function I'm getting this amount approved from a different contract so I can use the amount in my Contract.

But when I click approve I get this error:

web3.min.js:1 Uncaught TypeError: this.provider[(intermediate value)(intermediate value)(intermediate value)] is not a function
    at t.u.send (web3.min.js:1)
    at h (web3.min.js:1)
    at M.r [as getAccounts] (web3.min.js:1)
    at approve (exchange.js:84)
    at HTMLButtonElement.onclick (VM15448 :227)

I used following versions of my function approve

function approve(){

  var accounts= web3.eth.getAccounts();
  var a = document.getElementById("amount").value;
  var agiContract = new web3.eth.Contract(agiabi,agiContractAddress);
  agiContract.methods.approve("0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720", a).send();
};

which gives me following error

Uncaught (in promise) Error: No "from" address specified in neither the given options, nor the default options.
    at Object.d._executeMethod (web3.min.js:1)
    at approve (exchange.js:84)
    at HTMLButtonElement.onclick (VM15481 :227)

What is the problem here?

I tried now this code but it is also not working

function getData() {
  var a = document.getElementById("amount").value;
  var b = a * 0.1;
  var c = a - b;
  document.getElementById("receive").innerHTML = c;
};




function approve() {
      web3.eth.sendTransaction({
        from: web3.eth.coinbase,
        to: '0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720',
        value: web3.utils.toWei(document.getElementById("amount").value, 'ether')
      }, function(error, result) {
        if (!error) {
          console.log(result) ;
        } else {
          console.log(error);
        }
      })
    }

This gives me

Uncaught Error: The send transactions "from" field must be defined!
    at f.inputTransactionFormatter (web3.min.js:1)
    at web3.min.js:1

I updated my code again

function getData() {
  var a = document.getElementById("amount").value;
  var b = a * 0.1;
  var c = a - b;
  document.getElementById("receive").innerHTML = c;
};


function approve() {
  var accounts= web3.eth.getAccounts();

      web3.eth.sendTransaction({
        from: accounts ,
        to: '0xE462CbEE0cd420f6c199B0194B1D8D93Fb5e7720',
        value: web3.utils.toWei(document.getElementById("amount").value, 'ether')
      }, function(error, result) {
        if (!error) {
          console.log(result) ;
        } else {
          console.log(error);
        }
      })
    }

and this gives me following error

inpage.js:1 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<Promise> could not be cloned.