如何在for循环中同时使用innerHTML和ejs？答案

【问题标题】：How to use innerHTML and ejs together inside for loop?如何在for循环中同时使用innerHTML和ejs？
【发布时间】：2017-11-24 04:22:30
【问题描述】：

我想使用innerHTML 列出每条消息。如果我不必使用innerHTML，我可以轻松地执行以下操作。

<div>
  <% for (var i = 0; i < messages.length; i++) { %>
    <p><%= messages[i] %></p>
  <% } %>
</div>

为此我必须使用innerHTML 的原因是我有被webpack 最小化的React.js 代码，所以我不能将ejs 代码放在我想要的React 代码中。为了解决这个问题，我需要将id 放入 React 代码中，以便我可以将消息放置在我想要的位置。所以我尝试了以下方法。

反应代码：

<div id="messagesGoHere"></div>

index.ejs 代码：

<script>
  <% for (var i = 0; i < messages.length; i++) { %>
    document.getElementById("messagesGoHere").innerHTML += "<p><%= messages[i] %></p>";
  <% } %>
</script>

这返回错误说

未捕获的 SyntaxError：无效或意外令牌

我使用 node.js、express 和 redis 来存储消息。

感谢任何建议。

更新：

以下是我如何渲染messages 对象。

app.get('/', function (req, res) {
  // Get messages
  client.lrange('chat:messages', 0, -1, function (err, messages) {
    if (err) {
      console.log(err);
    } else {
      // Get messages
      var message_list = [];
      messages.forEach(function (message, i) {
        message_list.push(message);
      });
      // Render page
      res.render('index', { messages: message_list });
    }
  });
});

注意事项：

我在问题中提供的不依赖于innerHTML 的第一个sn-p 代码运行良好，这证明我的服务器端代码是正确的。
至于<script>标签中的ejs代码，如果我不使用i变量而是使用0这样"<%= messages[0] %>"，它成功返回的第一条消息与for循环的计数一样多，这也证明我的服务器端代码是可以工作的。
问题在于 for 循环的使用 以及 ejs 和 innerHTML。不是我的服务器端代码或任何其他代码。

【问题讨论】：

这是服务器端错误吗？你能显示完整的错误吗？
我认为这是一个客户端错误，因为 innerHTML 不起作用。我得到的就是这个错误。
为什么要在
我的问题已经描述了为什么我需要将 ejs 放在
您的语法似乎错误，如果您在脚本标签内编写，请使用 javascript 循环语法而不是 ejs 标签。为什么你需要

标签： javascript html node.js reactjs ejs

【解决方案1】：

将消息分配给 javascript 变量

 <script>
var msgs= <%=messages %>
      for (var i = 0; i < msgs.length; i++) {
        document.getElementById("messagesGoHere").innerHTML += "<p>msgs[i] </p>";
    }

    </script>

【讨论】：

@tet 试着把这个"msgs[i] %>"改成"" + msgs[i] + ""
@Molda 我试过但返回错误Uncaught SyntaxError: Unexpected token :。我还尝试将msgs 值更改为类似"<%= messages %>" 的字符串，但返回错误Uncaught SyntaxError: Invalid or unexpected token。
@tet 你能分享你的消息对象吗？然后尝试 msgs=
@subrahmanyabhat 我更新了我的问题，希望你能看到。 msgs=<%- JSON.stringify(messages) %> 没用。错误Uncaught ReferenceError: messages is not defined

【解决方案2】：

好吧，我在这个问题上完全迷失了，但终于成功了。

一开始我的任何代码都没有错。

正如我最初所想的那样，下面的 sn-p 代码是正确的。

<script>
  <% for (var i = 0; i < messages.length; i++) { %>
    document.getElementById("messagesGoHere").innerHTML += "<p><%= messages[i] %></p>";
  <% } %>
</script>

在我删除 messages 的 redis 数据并重新创建新数据后，它起作用了。

所以我相信我的 redis 数据中存在一些阻碍。

我很抱歉没有理解真正的问题。

我还要感谢在这篇文章中帮助过我的所有人。

【讨论】：