在Javascript中分配变量

Question

I have defined index as <%var index = 0;%> This is at the top of the body of HTML so I can use it throughout as a global variable. and I want to assign value of $(this).val() to <% index %> . I have tried multiple times but am not able to figure it out. I am using Node.js in backend and EJS in front end.

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                <% index %> = parseInt($(this).val()); ????
            }
            $modal.modal('show');
        }
    });
</script>

Answer 1

As someone mentioned you need to differentiate between what is calculated on the server and what is done on the browser:

A common page might look like:

<script>
    var index = <% index_calculated_on_server %>;
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                index = parseInt($(this).val()); ????
            }
            $modal.modal('show');
        }
    });
</script>

Answer 2

Your problem lies in mixing server-side and client-side rendering. To illustrate, let's take a look at the snippet you provided.

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                <% index %> = parseInt($(this).val()); // This is the problem line
            }
            $modal.modal('show');
        }
    });
</script>

EJS is rendered before even being sent to the client, merging in variables provided to it, so if you set index to be zero, you'll end up with a snippet like this after the rendering is done.

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                0 = parseInt($(this).val()); // Can't assign zero. 
            }
            $modal.modal('show');
        }
    });
</script>

Instead, what you should do is wrap your use of <% index %> in a wrapper element, which should allow you to manipulate it client side.

 $("#agency").on("change", function () { var $modal = $('#myModal'); if( $(this).val() !== '0' ) { $(".index-counter").text(parseInt($(this).val())); } $modal.modal = function () { /* stub function */ }; $modal.modal('show'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="agency" id="agency" /> <!-- This would be where <% index %> was inserted --> <div class="index-counter">0</div>