如何在 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';
        }
    }

干杯!

編輯：語法和語法問題