[SOLVED] innerHTML problem

Like @cryptokid recommended, im opening this new thread.

was following Chris Bs tutorial on how to create a dashboard.

getting the following error code after pressing the “transactions” button.

Screen Shot 2021-09-14 at 10.51.11 AM

JS Code:

Moralis.initialize("HlFF10yjAlTVOgVKqbGQNsudjMOmlVoe4KOPtUlZ");
Moralis.serverURL = "https://yhitnni921dz.bigmoralis.com:2053/server";

// Got to re code the homepage once off the local host
let homepage = "http://127.0.0.1:5500/index.html";

if(Moralis.User.current() == null && window.location.href != homepage) {
    document.querySelector("body").style.display = "none";
    window.location.href = "index.html";
}

   login = async() => {

    await Moralis.authenticate().then( async function (user) {
        console.log("logged in");
        console.log(Moralis.User.current());

        user.set("name", document.getElementById("userUsername").value);
        user.set("email", document.getElementById("userEmail").value);
        await user.save();
        console.log("user info has been saved");
        window.location.href = "dashboard.html";
        
    })
}

logout = async() => {
    await Moralis.User.logOut();
    console.log("user logged out");
    window.location.href = "index.html";
}

getTransactions = async () => {
    console.log("getTxs");

    const options = { chain: "bsc", address: "not displaying my address here."};
    const transactions = await Moralis.Web3API.account.getTransactions(options);
    console.log(transactions);

    if(transactions.total > 0){
        let tableTx = `
        <table class="table">
            <thead>
                <tr>
                    <th scope = "col">Transaction</th>
                    <th scope = "col">Block Number</th>
                    <th scope = "col">Age</th>
                    <th scope = "col">Type</th>
                    <th scope = "col">Fee</th>
                    <th scope = "col">Value</th>
                </tr>
            </thead>
            </tbody id="theTransactions">
            </tbody>
            </table>
        `
        document.querySelector("#tableOfTransactions").innerHTML = tableTx;
    } 
    

}


if(document.getElementById("btn-login") != null){
    document.getElementById("btn-login").onclick = login;
}

if(document.getElementById("btn-logout") != null){
    document.getElementById("btn-logout").onclick = logout;
}

if(document.getElementById("get-transactions-link") != null){
    document.getElementById("get-transactions-link").onclick = getTransactions;
}

necessary HTML Code

<h2>Transactions</h2>
        <div id = "tableOfTransactions "class="table-responsive">

        </div>

Let me know. thank you!!

JS LINE 57 is:

document.querySelector("#tableOfTransactions").innerHTML = tableTx;
1 Like

Hey @dexda

Please provide HTML code

Thanks for quick response.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator" content="Hugo 0.88.1">
  <title>Dashboard</title>

  <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/dashboard/">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="dashboard.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">

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


  <!-- Custom styles for this template -->

</head>

<body>

  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">EBB Dashboard</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
      data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a id= "btn-logout" class="nav-link px-3" href="#">Sign out</a>
      </div>
    </div>
  </header>

  <div class="container-fluid">
    <div class="row">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">
                <span data-feather="home"></span>
                Dashboard
              </a>
            </li>
            <li class="nav-item">
              <a id ="get-transactions-link" class="nav-link" href="#">
                <span data-feather="file"></span>
                Transactions
              </a>
            </li>
            <li class="nav-item">
              <a id ="get-balances-link" class="nav-link" href="#">
                <span data-feather="shopping-cart"></span>
                Balances
              </a>
            </li>
            <li class="nav-item">
              <a id ="get-nfts-link" class="nav-link" href="#">
                <span data-feather="users"></span>
                NFTs
              </a>
            </li>
          </ul>
        </div>
      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
        <div
          class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">Dashboard</h1>

        </div>
        
        <h2>Transactions</h2>
        <div id = "tableOfTransactions "class="table-responsive">

        </div>

        <h2>Balances</h2>
        <div id = "userBalances" class="table-responsive">

        </div>

        <h2>NFTs</h2>
        <div id = "tableOfNfts" class="table-responsive">

       
        </div>

      </main>
    </div>
  </div>


  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"
    integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"
    integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
    crossorigin="anonymous"></script>
    
  <script src="dashboard.js"></script>

  <script src="main.js"></script>

</body>

</html>

vs document.querySelector("#tableOfTransactions")

It looks like there is not the same id name used, it has a space in one place.

1 Like

thank you. resolved… ima have a closer look next time. appreciate you @cryptokid