Question

我目前正在使用Express.js和ejs在Windows 10中使用javascript在我们的实验室主页上工作.Web浏览器是Google Chrome，IDE是Web Storm。但是周围有一些错误。
现在我试图显示2列图像的内容，但它没有出现在页面上。
我怀疑使用我的代码有关于document.getElementById.innerHTML的问题。我在这里查找所有答案，但没有我想要的确切答案。我尝试了一切，包括移动＆＃34;脚本＆＃34;部分到＆＃34; body＆＃34;的最后一部分。我怀疑document.getElementById.innerHTML的原因是

首先当我将img src的某些部分插入到ejs文件中时，它完美地工作

第二次当我在谷歌浏览器中检查开发者控制台时，我没有预料到的部分（div和img src部分）

第三次在IDE控制台中，JavaScript文件没有错误，该错误具有向hjs注入html代码的功能。

我真的想知道为什么会这样。我试图弄清楚好几天了。

P.S。因为我不是说英语的人，所以表达方式可能有些含糊不清。请告诉我。

这是我的代码
index.js

var express = require('express');
var mysql = require('mysql');
var app = express();

var connection = mysql.createConnection({
  host:'bisltest.kaist.ac.kr',
  port:3306,
  user:'root',
  password:'bisl2016bsrc1',
  database:'BISL_homepage'
});
connection.connect(function(err){
  if (err){
    console.error('mysql connection error');
    console.error(err);
    throw err;
  }
});
app.use(express.static(__dirname + '/public'))
.
.
//some stuff
.
.
router.get('/album',function(req,res,next) {

  var query = connection.query("select image_link from album", function (err, result, fields) {
    if (err) {
      throw err;
    }
    res.render('album.ejs', {
      title: 'Express',
      results:result
    });
  });
})

album.ejs

   <!DOCTYPE html>
    <!-- === BEGIN HEADER ===-->
    <!--if IE 8html.ie8(lang='en')
    -->
    <!--if IE 9html.ie9(lang='en')
    -->
    <!-- [if !IE] <!-->
    <html lang="en">
      <!-- <![endif]-->
      <head>

        <title>Habitat - A Professional Bootstrap Template</title>


        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="description" content=""/>
        <meta name="author" content=""/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

        <link href="favicon.ico" rel="shortcut icon"/>

        <link rel="stylesheet" href="stylesheets/bootstrap.css"/>

        <link rel="stylesheet" href="stylesheets/animate.css"/>
        <link rel="stylesheet" href="stylesheets/font-awesome.css"/>
        <link rel="stylesheet" href="stylesheets/nexus.css"/>
        <link rel="stylesheet" href="stylesheets/responsive.css"/>
        <link rel="stylesheet" href="stylesheets/custom.css"/>

        <link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" rel="stylesheet" type="text/css"/>
      </head>
      <body>
        <div id="body-bg">

          <div id="header">
            <div class="container">
              <div class="row">

                <div class="logo"><a href="home" title=""><img src="images/BISL_logo.png" alt="Logo"/></a></div>

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

          <div id="hornav" class="bottom-border-shadow">
            <div class="container no-padding border-bottom">
              <div class="row">
                <div class="col-md-10 no-padding">
                  <div class="visible-lg">
                    <ul id="hornavmenu" class="nav navbar-nav">
                      <li><a href="home" class="fa-home active">Home</a></li>
                      <li><a href="Professor" class="fa-user">Professor</a></li>
                      <li><a href="Research" class="fa-copy">Research</a></li>
                      <li><a href="Publication" class="fa-copy">Publication</a></li>
                      <li><a href="Patent" class="fa-copy">Patent</a></li>
                      <li><a href="Member" class="fa-users">Member</a></li>
                      <li><a href="album" class="fa-camera">Album</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
        <div>
          <div class="container background-white">
            <div class="row margin-vert-30">
              <div class="col-md-12">
                <h2>BISL Album</h2>
              </div>
            </div>
            <div class="row">
              <div id="album" class="col-md-12 portfolio-group no-padding">
              </div>
            </div>
          </div>
        </div>
.
.
//some stuff
.
.
<script type="text/javascript" src="javascripts/ejs_edit.js" charset="utf-8"></script>
    <script type="text/javascript">
      var s = JSON.stringify(results)
      loop_for_ejs(s)
    </script>

ejs_edit.js

function loop_for_ejs(S){
    for(var v in S){
        var line =  "";
        line +='<'+'div class=\"col-md-6 portfolio-item margin-bottom-40 filer-code\">'+ '<div><a href=\"'+S[v].image_link+'\">'+'<figure><img src=\"'+S[v].image_link+'\">'+ '</figure>'+ '</a>'+ '</div>'+ '</div>';
        document.getElementById('album').innerHTML+=line;
    };
}

Answer 1

您没有告诉ejs将album.ejs呈现到html中，至少不会在您发布的代码中。在var s = JSON.stringify(results); loop_for_ejs(s);文件中，更改：

var s = <%- JSON.stringify(results) %>;
loop_for_ejs(s);

要：

JSON.stringify

或

或者，如果您已在其他尚未发布的部分中执行此操作，则在致电results之前，不应在loop_for_ejs上致电S[v].image_link，因为您会迭代字符串的字符，而不是行数组（因此undefined将始终计算为loop_for_ejs(results);）。然后试试这个：

{{1}}

document.getElementById.innerHTML不适用于ejs-javascript

1 个答案: