html5 javascript, global variables

Question

How to create a variable that is defined when page is loaded and not in script?

<script> 
    var comp = 0;
    function mMove(e)
    {        
        var x = e.screenX;           
        if (x > comp + 80)
        {
            comp = x;
            somethingcool();
        }       
    }        
</script>

    <video id="vid_ID" onclick="vidclick()" onmousemove="mMove(event)" controls tabindex="0" autobuffer preload>
        <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="test.mp4"></source>
        <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>

I have some video and onmousemove event. I want to run the somethingcool() function every time my mouse moves along the x-axis by 80 pixels. I need some way to store comp variable.

What is the problem? I think this code of yours will work fine. — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 26, 2016 at 18:22
in each mousemove event script is starting from <script> , not from function mMove(e), so comp are always at 0 — user2213608
– user2213608, Commented Mar 26, 2016 at 19:32
That happens if you are reloading the page..Are you reloading the page? Are you loading the page which has the script for mouse moement evvent? — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 26, 2016 at 19:35
im loading a page with script. and i have no idea why comp 0 are always at 0 — user2213608
– user2213608, Commented Mar 26, 2016 at 20:03
If you load the page which has the script Obviously the data will be overwritten.. — Rajshekar Reddy
– Rajshekar Reddy, Commented Mar 26, 2016 at 20:08

Rajshekar Reddy · Accepted Answer · 2016-03-26 20:15:17Z

1

After you mentioned that you are reloading the page which has the sript. The problem is Obvious. Your are overwriting the values. So here are the possible solutions

Solutions

1. Make sure you move the variable declaration out of that page. Move it to the main page. Or else everytime that page is loaded the value will be set back to 0.

2. Use the LocalStorage to store the values. You can do this.

<script> 

   if(localStorage.getItem("compValue")){  //First time page load storage will be undefined set the value to 0. On consecutive calls this if block will not execute and hence value will not be overwritten.
     localStorage.setItem("compValue", 0);
   }

    var comp = localStorage.getItem("compValue"); //read from storage
    function mMove(e)
    {        
        var x = e.screenX;           
        if (x > comp + 80)
        {
            comp = x;
            somethingcool();
        }       
    }        
</script>

I woud prefer Option 1, As the task is not so complicated to use storages. Just make the variable global and take care to not overwrite it

answered Mar 26, 2016 at 20:15

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

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

2 Comments

user2213608 Over a year ago

I didn't mean that I'm loading the page with script in it, I meant that i'm loading the whole page once with scripts and html in it. Any way I solved my problem. What I did is that I combined all functions in to one <script></script>. When there were <script></script> for each function in that case for some reason variables did not survive

Rajshekar Reddy Over a year ago

@user2213608 glad you are through with this. may be there was some variable with same name... whats so ever.. happy coding!!!

Nikhil Mehta · Accepted Answer · 2016-03-26 17:57:59Z

0

You can use document.ready function. It is loaded along with the page, every time you load the page or refresh it. Simply add comp = 0 or var comp = 0 in it and you can use it anywhere in your code as a global JavaScript variable. It's a jquery function. More on it on : https://learn.jquery.com/using-jquery-core/document-ready/

answered Mar 26, 2016 at 17:57

Nikhil Mehta

592 silver badges4 bronze badges

2 Comments

user2213608 Over a year ago

its aint working. <script> $(document).ready(function () { $('#t2').html("loaded"); var comp = 0; var vid = $('#vid_ID')[0]; }); </script> i get the message ready, but as soon as program exit this script all variables are removed

Nikhil Mehta Over a year ago

All the JavaScript variables are meant to be removed when the program is over. If you want to persist the value of the variable, you can use localStorage or cookies to store the data. localStorage is a cleaner solution than cookies as it has been added for temporary storage of data. Also, it's better than session storage, because it persists even if the session is over.

Collectives™ on Stack Overflow

html5 javascript, global variables

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related