如何在 ejs 文件中使用传递的变量

Question

所以我试图将 ejs 文件中 html 标记的值更改为我在 JavaScript 文件中声明的变量

let checkbox = document.querySelector('input[name="plan"]');

checkbox.addEventListener('change', function () {
    if (this.checked) {
        document.querySelector('.plan-title').innerHTML = investment.name;
        document.querySelector('.plan-description').innerHTML = investment.description;
    }
    else {
        document.querySelector('.plan-title').innerHTML = '';
        document.querySelector('.plan-description').innerHTML = '';
    }
});

因此，当我直接通过它时，它会显示，但我希望它是动态的，尽管当我单击复选框时它会通过它似乎没有任何价值。

<%- include('../partials/sidebar'); %>
    <% if(currentUser && currentUser.isAdmin){ %>
        <a href="/investment/new">Add New Plan</a>
        <% } %>
            <div class="container">
                <h1>Investments</h1>

                <% investments.forEach((investment)=>{ %>
                    <div class="col-md-4">
                        <div class="card">
                            <strong>
                                <%= investment.name %>
                            </strong>
                            <h4>
                                <%= investment.min %> - <%=investment.max %>
                            </h4>
                            <p>
                                <%= investment.caption %>
                            </p>
                            <p><input type="checkbox" name="plan" id="">Choose investment</p>
                        </div>
                        <% if(currentUser && currentUser.isAdmin){ %>
                            <a href="/investment/<%= investment._id %>/edit">Edit</a>
                            <a href="/investment/new">Delete</a>
                            <% } %>

                    </div>

                    <% }) %>

                        <% investments.forEach((investment)=>{ %>
                            <div class="">
                                <div><strong>Package: </strong>
                                    <p class="plan-title">
                                    </p>
                                </div>
                                <p class="plan-description">

                                </p>
                                <input type="number" name="" id="" min="<%= investment.min %>"
                                    max="<%= investment.max %>">
                            </div>


                            <% }) %>


            </div>

            <%- include('../partials/footer'); %>

我似乎无法通过这个，需要帮助谢谢！

Answer 1

我不清楚您指的是什么变量，但是您在客户端脚本中设置的任何变量在您在服务器上呈现的 EJS 文件中对您不可用。 服务器端 Node.js 代码和客户端 JavaScript 代码互不相识。

Answer 2

如果我做对了，当用户单击复选框时，您将尝试在 JavaScript 的 HTML 标记中插入 EJS 变量的值。

HTML 标记的值不会改变，因为在您的 JS 代码中：

    document.querySelector('.plan-title').innerHTML = investment.name;
    document.querySelector('.plan-description').innerHTML = investment.description;

investment.description investment.name 。 检查页面上的控制台。

这是因为您在页面完成渲染后尝试访问 EJS 变量。

EJS 主要用于在页面渲染之前将服务器端变量传递给页面。 因此，一旦呈现，您将无法访问这些变量。

因此，要在页面完成渲染后在 JavaScript 中获取这些变量的值，请尝试执行以下操作：

    document.querySelector('.plan-title').innerHTML = '<%- investment.name %>';
    document.querySelector('.plan-description').innerHTML = '<%- investment.description %>';

反而。 这就是将 EJS 变量传递给 JavaScript 的方式。 JavaScript 现在将其视为一个字符串并且没有问题，这与在您的代码中寻找investment object 并返回 undefined 不同，因为该变量未在客户端定义。

此外，由于您在 HTML 部分中有一个 for-each 循环，我假设您正在尝试更改特定plan-title和plan-description div 的值。 如果是这种情况，JavaScript 部分中的 '<%=invest.name '<%= investment.name %>'和'<%= investment.description %>'也应该在一个 for-each 循环中，但这会很混乱。

我建议您改为在 HTML 部分中的 for-each 循环下方，根据 for-each 循环的索引将 class 添加到 div 标签，将更改事件添加到复选框，并传递复选框和索引the for-each loop to the JavaScript function which would handle the on change event, include the EJS variables in the plan-title and plan-description divs, and in the JavaScript function that handles on change event change the CSS display property from display: none display: block这些 div。

看一个例子：

HTML：

            <% investments.forEach((investment, index)=>{ %>
                <div class="col-md-4">
                    <div class="card">
                        <strong>
                            <%= investment.name %>
                        </strong>
                        <h4>
                            <%= investment.min %> - <%=investment.max %>
                        </h4>
                        <p>
                            <%= investment.caption %>
                        </p>
                        <p><input onchange="displayPlan(this, '<%= index %>')" type="checkbox" name="plan" id="">Choose investment</p>
                    </div>
                    <% if(currentUser && currentUser.isAdmin){ %>
                        <a href="/investment/<%= investment._id %>/edit">Edit</a>
                        <a href="/investment/new">Delete</a>
                        <% } %>

                </div>
                <% }) %>
                    <% investments.forEach((investment, index)=>{ %>
                        <div class="plan <%= index %>" style="display: none;">
                            <div><strong>Package: </strong>
                                <p class="plan-title">
                                 <%- investment.name  %>
                                </p>
                            </div>
                            <p class="plan-description">
                              <%- investment.description %>
                            </p>
                            <input type="number" name="" id="" min="<%= investment.min %>"
                                max="<%= investment.max %>">
                        </div>
                        <% }) %>

JavaScript：

    function displayPlan(checkbox, id){
        if (checkbox.checked) {
            document.querySelector(`.plan.${id}`).style.display = 'block';
        }
        else {
            document.querySelector(`.plan.${id}`).style.display = 'none';
        }
    }

干杯!

编辑：语法和语法问题