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

Question

SO i am trying to change the value of an html tag in an ejs file to a variable i declared in a JavaScript file

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 = '';
    }
});

So when I pass it directly it shows but I want it to be dynamic and Although it gets pass through when i click the checkbox it doesn't seem to have any value.

<%- 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'); %>

I cant seem to get through this, need help thanks!

Answer 1

It's not clear to me what variable you're referring to, but any variable you set in a client-side script will not be available to you in an EJS file that you're rendering on the server. Server-side Node.js code and client-side JavaScript code have no knowledge of each other.

Answer 2

If I got it right, you are trying to insert the value of the EJS variable in the HTML tag from JavaScript when the user clicks the checkbox.

The value of the HTML tag doesn't change because in your JS code:

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

investment.name and investment.description are undefined. Check the console on your page.

This is because you tried accessing EJS variables after the page finished rendering.

EJS is mainly used to pass server-side variables to the page before it is rendered. So once it's rendered you cannot access those variables.

So to have the values of those variables in your JavaScript after the page finishes rendering, try doing:

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

instead. This is how you pass the EJS variable to JavaScript. JavaScript now sees it as a string and there's no problem, unlike in your code where it was looking for investment object and returned undefined since that variable is not defined on the client-side.

Also, since you have a for-each loop in the HTML part, I'm assuming you are trying to change the values of specific plan-title and plan-description divs. If that's the case, '<%= investment.name %>' and '<%= investment.description %>' in JavaScript part should be in a for-each loop as well, but that would be a lot of mess.

I suggest you instead to right under the for-each loop in the HTML part, add class to the div tag according to the index of the for-each loop, add on change event to the checkbox, and pass the checkbox and the index of 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 to display: block to these divs.

See an example:

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';
        }
    }

Cheers!

EDIT: Grammar and syntax issues