Lesson 8 : Uncaught TypeError in Fund Button #517

ZahraaHawie · 2022-06-22T18:55:45Z

ZahraaHawie
Jun 22, 2022

Hello! I was in Lesson 8, fund button is not working although I have all the code correct.

Here is the error after pressing Fund Button:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FundMe App</title>
  </head>
  <body>
    HI!
    <script src="./index.js" type="module"></script>

    <button id="connectButton">Connect</button>
    <button id="fundButton">Fund</button>
  </body>
</html>

index.js

import { ethers } from "./ethers-5.6.esm.min.js";
import { abi, contractAddress } from "./constants.js";

const connectButton = document.getElementById("connectButton");
const fundButton = document.getElementById("fundButton");
connectButton.onclick = connect;
fundButton.onclick = fund;

async function connect() {
  if (typeof window.ethereum !== "undefined") {
    try {
      await ethereum.request({ method: "eth_requestAccounts" });
    } catch (error) {
      console.log(error);
    }
    connectButton.innerHTML = "Connected";
    const accounts = await ethereum.request({ method: "eth_accounts" });
    console.log(accounts);
  } else {
    connectButton.innerHTML = "Please install MetaMask";
  }
}

async function fund() {
  const ethAmount = document.getElementById("ethAmount").value;
  console.log(`Funding with ${ethAmount}...`);
  if (typeof window.ethereum !== "undefined") {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(contractAddress, abi, signer);
    try {
      const transactionResponse = await contract.fund({
        value: ethers.utils.parseEther(ethAmount),
      });
      await listenForTransactionMine(transactionResponse, provider);
    } catch (error) {
      console.log(error);
    }
  } else {
    fundButton.innerHTML = "Please install MetaMask";
  }
}

constants.js

I export the contract address ( from terminal FundMe deployed at 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512 )

also exported the abi

export const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";
export const abi = [
  {
    inputs: [
      {
        internalType: "address",
        name: "priceFeed",
        type: "address",
      },
    ],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  {
    inputs: [],
    name: "FundMe__NotOwner",
    type: "error",
  },
  {
    inputs: [],
    name: "MINIMUM_USD",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "cheaperWithdraw",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
  {
    inputs: [],
    name: "fund",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "address",
        name: "fundingAddress",
        type: "address",
      },
    ],
    name: "getAddressToAmountFunded",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "uint256",
        name: "index",
        type: "uint256",
      },
    ],
    name: "getFunder",
    outputs: [
      {
        internalType: "address",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getOwner",
    outputs: [
      {
        internalType: "address",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getPriceFeed",
    outputs: [
      {
        internalType: "contract AggregatorV3Interface",
        name: "",
        type: "address",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "getVersion",
    outputs: [
      {
        internalType: "uint256",
        name: "",
        type: "uint256",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [],
    name: "withdraw",
    outputs: [],
    stateMutability: "payable",
    type: "function",
  },
];

Note that I added the ethers-5.6.esm.min.js and funded the wallet connected to the site.

Answered by alymurtazamemon

Jun 23, 2022

@zahraha97 you forgot to add this in HTML file <input id="ethAmount" placeholder="0.1" />

View full answer

gonzales17 · 2022-06-22T20:08:44Z

gonzales17
Jun 22, 2022

Looks like your js is trying to read from field "ethAmount", which isn't defined in your HTML anywhere.

0 replies

alymurtazamemon · 2022-06-23T01:37:07Z

alymurtazamemon
Jun 23, 2022

@zahraha97 you forgot to add this in HTML file <input id="ethAmount" placeholder="0.1" />

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Lesson 8 : Uncaught TypeError in Fund Button #517

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Lesson 8 : Uncaught TypeError in Fund Button #517

Uh oh!

ZahraaHawie Jun 22, 2022

Replies: 2 comments

Uh oh!

gonzales17 Jun 22, 2022

Uh oh!

Uh oh!

alymurtazamemon Jun 23, 2022

ZahraaHawie
Jun 22, 2022

gonzales17
Jun 22, 2022

alymurtazamemon
Jun 23, 2022