Assigning a variable in 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>

It seems you're trying to mix server-side rendering and client-side rendering in a way that just won't quite work. As the script tag is executed after the page is loaded, it won't be able to properly parse the rendered EJS. Instead, consider adding a wrapper element around what you need to change, and updating that client-side instead of mixing server-side and client-side variables, since those won't be able to update in sync. — Brandon Anzaldi
– Brandon Anzaldi, Commented Mar 14, 2017 at 21:16
Your index variable is a server variable, while your script is running on the client. You cannot assign in the client environment something to a server variable. Check out Ajax to communicate data to the server. — trincot
– trincot, Commented Mar 14, 2017 at 21:16
use window.index=parseInt($(this).val()); to access it globally — ajai Jothi
– ajai Jothi, Commented Mar 14, 2017 at 21:17
ejs is not front end, this is where your mental picture breaks down. it's confusing because it's mixed together in front of you, but the ejs renders well before the js — aw04
– aw04, Commented Mar 14, 2017 at 21:18
@ajaiJothi That probably won't quite do what is expected. From what I can tell, the asker wishes to update a variable that will sync with another variable further up the page. In addition, I'm always pretty iffy on touching globals/window. — Brandon Anzaldi
– Brandon Anzaldi, Commented Mar 14, 2017 at 21:21

Marc Rohloff · Accepted Answer · 2017-03-14 21:22:57Z

2

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>

answered Mar 14, 2017 at 21:22

Marc Rohloff

1,3527 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brandon Anzaldi · Accepted Answer · 2017-03-16 22:44:35Z

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>

Collectives™ on Stack Overflow

Assigning a variable in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related