How to send a value to smart contract function using meta mask and web3.js?

Question

I tried to follow a tutorial https://livecodestream.dev/post/interacting-with-smart-contracts-from-web-apps/

I was able to retrieve the number via call function, but was not able to update the number via send function. I don't use infura. I use MetaMask and it is connected to my page on local host. I gave permission to use the Meta Mask accounts.

I trigger the function by button

<button onclick="changeCoolNumber();">Change Cool Number</button>

My inpage Javascript is as follows:

<script type="text/javascript">
async function loadWeb3() {
      if (window.ethereum) {
          window.web3 = new Web3(window.ethereum);
          window.ethereum.enable();
      }
}

async function loadContract() {
    return await new window.web3.eth.Contract([
        {
            "inputs": [],
            "name": "coolNumber",
            "outputs": [
                {
                    "internalType": "uint256",
                    "name": "",
                    "type": "uint256"
                }
            ],
            "stateMutability": "view",
            "type": "function"
        },
        {
            "inputs": [
                {
                    "internalType": "uint256",
                    "name": "_coolNumber",
                    "type": "uint256"
                }
            ],
            "name": "setCoolNumber",
            "outputs": [],
            "stateMutability": "nonpayable",
            "type": "function"
        }
    ], '0x5F4a8C71AFB0c01BA741106d418E78888607Ee63');
}

async function getCurrentAccount() {
    const accounts = await window.web3.eth.getAccounts();
    return accounts[0];
}

async function printCoolNumber() {
    const num = await window.contract.methods.coolNumber().call();
    document.querySelector("output").textContent = num;
}

async function changeCoolNumber() {
    const value = parseInt(45);
    const account = await getCurrentAccount();
    console.log("accounts", account);
    const coolNumber = await window.contract.methods.setCoolNumber(value).send({ from: account });
}

async function load() {
    await loadWeb3();
    updateStatus('Web3 Ready!');
    window.contract = await loadContract(); 
    updateStatus('Contract Ready!');
    
}

load();

From all I heard so far is, that Meta Mask should pop up for signing the transaction to change the number via setCoolNumber(). I'm using Firefox with MetaMask extention. HTTP-Server as local server and the following web3.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

I hope anybody can help me solve this. Thanks in advance!

Answer 1

Finally MetaMask pops up with the following send() command. (There is a colon after the accountadress)

const coolNumber = await window.contract.methods.setCoolNumber(45).send({ from: '0xDe.....', });

Answer 2

I had the same problem. Adding a default account helped me: web3.eth.defaultAccount = web3.eth.accounts[0];