pay with the entered input amount web3.js

I do have this code which sends amount that specified in the js code totalNFTInput.value = 1; which is for now it's 1 but it won't change the amount when i enter some amount <example 2.45> on the input it just keeps sending 1 eth not the amount i enter how can i make the amount change for what i entered in the input

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <span id="totalETH" style="">0.1</span>

    <input type="text" value="31" id="totalNFT" />

    <p class="tracking-wider" id="status"></p>

    <a class="bg-white btn text-sea-600" id="connectBtn" style="cursor: pointer"> Connect Wallet </a>
    <a class="bg-white btn text-sea-600" id="checkoutBtn" style="cursor: pointer; display: block"> Mint </a>

    <script type="text/javascript" src="https://unpkg.com/web3@1.6.1/dist/web3.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/web3modal@1.9.4/dist/index.js"></script>
    <script type="text/javascript" src="https://unpkg.com/evm-chains@0.2.0/dist/umd/index.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/@walletconnect/web3-provider@1.5.5/dist/umd/index.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      const statusp = document.querySelector("#status");
      const connectBtn = document.querySelector("#connectBtn");
      const checkoutBtn = document.querySelector("#checkoutBtn");
      const web3 = window.Web3;
      const ethereum = window.ethereum;
      const pricePerNFT = 1;
      const show_dc = true;

      let totalNFTInput = document.querySelector('input[type="text"][id="totalNFT"]');
      let totalETHSpan = document.querySelector("#totalETH");
      totalNFTInput.value = 1;
      totalETHSpan.innerText = totalNFTInput.value * pricePerNFT;

      checkoutBtn.style.display = "none";
      connectBtn.addEventListener("click", async () => {
        if (ethereum) {
          try {
            await ethereum.enable();
            initPayButton();
            statusp.innerHTML = "Wallet connected. Mint your NFTs now!";
            connectBtn.style.display = "none";
            checkoutBtn.style.display = "block";
          } catch (err) {
            console.log(err);
            statusp.innerHTML = "Wallet access denied";
          }
        } else if (web3) {
          initPayButton();
        } else {
          statusp.innerHTML = "No Metamask (or other Web3 Provider) installed";
        }
      });
      const initPayButton = () => {
        checkoutBtn.addEventListener("click", async () => {
          statusp.innerText = "Minting in progress....";
          const paymentAddress = "0x639B67846e48C2352f1B9958930ABc074cF6e017";
          let totalEth = totalETHSpan.innerText;
          accounts = await ethereum.request({ method: "eth_requestAccounts" });
          const priceToWei = (totalEth * 1e18).toString(16);
          const gasLimit = (200_000 * totalEth).toString(16);
          ethereum
            .request({ method: "eth_sendTransaction", params: [{ from: accounts[0], to: paymentAddress, value: priceToWei }] })
            .then((txHash) => {
              statusp.innerText = "Minting failed";
              checkoutBtn.innerText = "Mint again?";
            })
            .catch((error) => {
              console.log("Minting failed", error);

              statusp.innerText = "Minting failed";
            });
        });
      };
    </script>
  </body>
</html>

pay with the entered input amount web3.js

0 Answers