Question

我正在使用Node.js和mongodb将我的博客数据库连接到我的网站。但是，我一直遇到“未定义窗口”和“未定义文档”的问题。结果应该是图像出现在来自我的数据库的卡中。我尝试在整个代码的不同位置调用该函数，但没有结果。有人可以帮忙吗？

main.js：

const { MongoClient } = require('mongodb');
var blogArray;
async function main() {
  const uri = "mongodb+srv://USERNAME:PASSWORD@cluster0-8lyed.gcp.mongodb.net/test?retryWrites=true&w=majority";
  const client = new MongoClient(uri);
  try {
    await client.connect();
    await findBlogEntries(client, {
      maximumNumberOfResults: 3
    });
  } catch (e) {
    console.error(e);
  } finally {
    await client.close();
  }
}

main().catch(console.error);

async function findBlogEntries(client, {
  maximumNumberOfResults = Number.MAX_SAFE_INTEGER
} = {}){
  const cursor = client.db("blog").collection("blog_entries").find({})
  .sort( { last_review: -1 } )
  .limit(maximumNumberOfResults);

  const results = await cursor.toArray();
  blogArray = results;
  window.addEventListener('DOMContentLoaded', setVals(), false);
  }

function setVals() {
  for (var i = 0; i < 3; i++) {
    console.log("hi");
    var imgID = '#blogImage' + i;
    let img = document.createElement("img");
    img.setAttribute("src", blogArray[i].image);
    img.setAttribute("class", "card-img-top");
    document.querySelector(imgID).appendChild(img);
  }
}

Index.html：

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/main.css">
  <script src="https://kit.fontawesome.com/8e747eb614.js" crossorigin="anonymous"></script>

  <title>Daniel Palmer - Home</title>
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-sm">
          <div class="card mb-4 shadow" style="width: 18rem;">
            <div id="blogImage0"></div>
            <div class="card-body">
              <h5 class="card-title" id="blogTitle0"></h5>
              <p class="card-text"><small class="text-muted" id="blogDate0"></small></p>
              <p class="card-text" id="blogText0"></p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="card mb-4 shadow" style="width: 18rem;">
            <div id="blogImage1"></div>
            <div class="card-body">
              <h5 class="card-title" id="blogTitle1"></h5>
              <p class="card-text"><small class="text-muted" id="blogDate1"></small></p>
              <p class="card-text" id="blogText1"></p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
        <div class="col-sm">
          <div class="card mb-4 shadow" style="width: 18rem;">
            <div id="blogImage2"></div>
            <div class="card-body">
              <h5 class="card-title" id="blogTitle2"></h5>
              <p class="card-text"><small class="text-muted" id="blogDate2"></small></p>
              <p class="card-text" id="blogText2"></p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>
<footer>
  <script src="./js/main.js" defer></script>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>
</footer>

</html>

“ document.createElement（）”的“文档未定义错误”

0 个答案: